微信小程序 —播放音频
功能描述：一进页面就会播放音乐，点击暂停再次点击后可以开始播放，退出页面后播放停止。
HTML:文章来源：https://www.toymoban.com/news/detail-515254.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;
}
文章来源地址https://www.toymoban.com/news/detail-515254.html
到了这里，关于微信小程序 ---播放音频的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
![uniapp - [微信小程序] 超详细实时录音功能，录制外部声音及播放上传到服务器（支持录音完毕生成 mp3、试听音频(带进度条)、暂停录音、重新录音、限制录音最大时长、自定义音频名称等功能）](https://imgs.yssmx.com/Uploads/2024/02/517899-1.gif)
