微信小程序实现播放音频功能

本文实例为大家分享了微信小程序实现播放音频的具体代码，供大家参考，具体内容如下

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

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;
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

查看更多关于微信小程序实现播放音频功能的详细内容...