美文网首页微信小程序分享
微信小程序-InnerAudioContext()播放音频

微信小程序-InnerAudioContext()播放音频

作者: Mr_Atom | 来源:发表于2018-09-27 17:49 被阅读3317次

    实现播放音频很简单,直接上代码啦:

    this.innerAudioContext = wx.createInnerAudioContext();

    var voicePath = this.data.voiceTempFilePath;

    this.innerAudioContext.src = voicePath;  

    this.innerAudioContext.play();

    this.innerAudioContext.onEnded((res) => {

     console.log('播放结束!');

     })

     // 播放音频失败的回调

    this.innerAudioContext.onError((res) => { 

    console.log('播放音频失败' + res);

    })

     this.innerAudioContext.onStop((res) => {

          console.log('停止播放!');

      })

    关于音频播放的几个callback可以根据需求自行添加,如需更多,官方文档贴给你:

    https://developers.weixin.qq.com/miniprogram/dev/api/media/audio/InnerAudioContext.html

    这里主要想说的是,做的时候要实现点击播放,我把上面代码写入一个方法中,然后点击调用,发现音频可以播放,但是无法停止,

    也了解了一下,发现很多人也遇到这个问题.解决方法是:把音频实例的创建以及callback写入onload()中,这样就正常了.音频实例以及callback不用反复创建.代码如下:

      /**

      * 生命周期函数--监听页面加载

      */

      onLoad: function (options) {

        this.registerAudioContext();

      },

    // 注册音频

      registerAudioContext:function () {

        this.innerAudioContext = wx.createInnerAudioContext();

        this.innerAudioContext.onEnded((res) => {

        })

        this.innerAudioContext.onError((res) => {

          // 播放音频失败的回调

          console.log('播放音频失败' + res);

        })

        this.innerAudioContext.onStop((res) => {

          console.log('播放结束!');

        })

      },

    相关文章

      网友评论

        本文标题:微信小程序-InnerAudioContext()播放音频

        本文链接:https://www.haomeiwen.com/subject/ldfyoftx.html