基于uni-app的H5页面插入音乐

利用uni.createInnerAudioContext()组件

1. 在App.vue中利用globalData定义全局变量

 export default {
        globalData: {
            audioMusic: {}
        },
        onLaunch: function() {
            //音乐
            this.globalData.audioMusic = uni.createInnerAudioContext();
            this.globalData.audioMusic.autoplay = true;//自动播放
            this.globalData.audioMusic.loop = true; // 是否循环播放
            this.globalData.audioMusic.src = "/static/music.mp3";
            this.globalData.audioMusic.onPlay(function() {
                console.log("播放了")
            }); // 播放
        }
}

2. 在主页面最外部绑定点击事件

   uni.createInnerAudioContext()在H5中需要人机交互才能触发play()函数，因此需要在页面绑定点击事件，由用户触发播放函数。

    //内容

3. globalData的正确使用

• getApp().globalData.prop

4. 用audio标签也可以实现音频播放

具有以下属性：

• controls 向用户显示控件，比如播放按钮。
• autoplay 音频在就绪后马上播放。
• loop 音频结束时重新开始播放。