亲宝软件园·资讯

展开

微信小程序播放音频

In Heaven 人气:0

功能描述:一进页面就会播放音乐,点击暂停再次点击后可以开始播放,退出页面后播放停止。

HTML:

<view class="musicd">
    <image src="/resource/images/mic1.png" wx:if="{{isPlay}}" bindtap="audioPause"></image>
    <image src="/resource/images/mic2.png" wx:else bindtap="audioPlay"></image>
</view>
data:{
    isPlay: true,
    srcMic: 'zzzzz.mp3'
}

onLoad: function (t) {
    this.audioPlay();
},
//播放语音
  yuyinPlay: function (e) {
    let that = this
    //创建内部 audio 上下文 InnerAudioContext 对象。
    that.innerAudioContext = wx.createInnerAudioContext();
    that.innerAudioContext.onError(function (res) {
    })
    if ((that.data.srcMic == '') || (that.data.srcMic == undefined)) return;

    that.innerAudioContext.src = that.data.srcMic //设置音频地址
    this.innerAudioContext.play(); //播放音频
  },
  //播放
  audioPlay() {
    this.yuyinPlay();
    this.setData({
      isPlay: true
    })
  },
  // 停止播放
  audioPause() {
    this.setData({
      isPlay: false
    })
    this.innerAudioContext.pause();//暂停音频 

  },
  // 结束语音
  end: function (e) {
    let that = this
    if ((that.data.src) || (that.data.src != undefined)) return
    that.innerAudioContext.pause();//暂停音频 
  },

 onHide: function () {
    this.end();//暂停音频
  },
  onUnload: function () {
    this.end();//暂停音频
  },
.musicd {
  position: fixed;
  z-index: 9999;
  top: 10%;
  left: 4%;
}
.musicd image {
  width: 100rpx;
  height: 100rpx;
  z-index: 999;
}

加载全部内容

相关教程
猜你喜欢
用户评论