微信小程序实现播放音频
作者：示羊online
这篇文章主要为大家详细介绍了微信小程序实现播放音频，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了微信小程序实现播放音频的具体代码，供大家参考，具体内容如下
wxml：
<!-- 语音 -->
<view wx:if="{{content.mp3.length > 0 }}">
<view class='audio' bindtap='musicStart'>
<view class='audio_btn'>
<image src='/img/btn_play3.png' class='image-full' wx:if="{{playStatus}}"></image>
<!-- 未播放-->
<image src='/img/btn_stop@2x.png' class='image-full' wx:else catchtap='canel_handover'></image>
<!-- 播放中-->
</view>
<view class='audio_pro'>
<slider class="drag" step="10" value="{{curTimeVal}}" max="{{duration}}" backgroundColor="#efefef" activeColor="#90BED5" />
</view>
<text class='audio_text'>{{formatedPlayTime}}</text>
</view>
</view>wxss：
/* 传语音 */
.audio{
display:flex;
position:relative;
height:140rpx;
line-height:140rpx;
background:#f7f7f7;
width:690rpx;
margin:0 auto;
}
.audio_img{
position: absolute;
top:-15rpx;
right:-15rpx;
width:30rpx;
height:30rpx;
}
.audio_btn{
width:88rpx;
height:88rpx;
margin-top:28rpx;
margin-left:42rpx
}
.audio_pro{
margin-top:36rpx;
margin-left:20rpx;
width:410rpx;
}
.audio_text{
font-weight: bold;
margin-left:36rpx;
color:#90BED5;
font-size: 10pt
}js：
const app = getApp();
let innerAudioContext = wx.createInnerAudioContext(); //创建音频实例
Page({
data: {
content : {},
formatedPlayTime: '00:00',
playStatus : true, //未播放的图片
curTimeVal: 0,
},
// 音频播放
musicStart: function (e) {
let that = this
that.setData({ playStatus : false})
var musicUrl = that.data.content.mp3[0] //音频url
console.log('musicUrl', musicUrl)
innerAudioContext.src = musicUrl;
innerAudioContext.autoplay = true
innerAudioContext.play();
innerAudioContext.onTimeUpdate((res) => {
console.log('onTimeUpdate', res)
console.log("duratio的值：", innerAudioContext.duration)
that.setData({
duration: innerAudioContext.duration.toFixed(2) * 100,
curTimeVal: innerAudioContext.currentTime.toFixed(2) * 100,
formatedPlayTime: this.formatTime(innerAudioContext.currentTime)
})
if (innerAudioContext.duration.toFixed(2) - innerAudioContext.currentTime.toFixed(2) <= 0) {
that.setStopState(that)
}
innerAudioContext.onEnded(() => {
that.setStopState(that)
})
})
},
updateTime: function () {
let that = this;
innerAudioContext.onTimeUpdate((res) => {
console.log(res)
console.log("duratio的值：", innerAudioContext.duration)
that.setData({
duration: innerAudioContext.duration.toFixed(2) * 100,
curTimeVal: innerAudioContext.currentTime.toFixed(2) * 100,
formatedPlayTime: this.formatTime(innerAudioContext.currentTime)
})
})
if (innerAudioContext.duration.toFixed(2) - innerAudioContext.currentTime.toFixed(2) <= 0) {
that.setStopState(that)
}
innerAudioContext.onEnded(() => {
that.setStopState(that)
})
},
canel_handover() {
// innerAudioContext.offPause(); //取消录音暂停
innerAudioContext.pause(); //语音暂停
this.setData({
playStatus: true
})
},
setStopState: function (that) {
that.setData({
curTimeVal: 0,
formatedPlayTime: 0,
playStatus: true, //图片展示为未播放
})
innerAudioContext.stop(); //
},
formatTime: (time) => {
time = Math.floor(time);
var m = Math.floor(time / 60).toString();
m = m.length < 2 ? '0' + m : m;
var s = (time - parseInt(m) * 60).toString();
s = s.length < 2 ? '0' + s : s;
return m + ':' + s;
},
onLoad: function (options) {
console.log('options', options)
var that = this
var id = options.jsonStr
app.agriknow.LoveHouseOthers(id).then(res => {
var result = res.data.Data[0]
that.setData({ content: result })
}).catch(err => {
console.log(err)
})
},
remove(){
var that = this
wx.showModal({
title: '提示',
content: '确认删除',
success(res) {
if (res.confirm) {
console.log('用户点击确定')
that.removeLove();
} else if (res.cancel) {
console.log('用户点击取消')
}
}
})
},
onShow: function (){
var that = this
setTimeout(function () {
that.setData({ loading: false })
}, 1000)
},
removeLove(){
var id = this.data.content.id
if (this.data.content.status == 1 || this.data.content.status == '1'){
app.agriknow.removeLove(id).then(res => {
if (res.data.Code == 200) {
app.way.toast('删除成功')
setTimeout(function () {
app.way.nav('/pages/mine/passLove/passLove')
}, 1000)
} else {
app.way.alert('删除失败')
}
}).catch(err => {
console.log(err)
})
}else{
app.way.modal('已审核 不能删除')
}
},
//图片点击 放大 识别
previewImage(e) {
let url = e.currentTarget.dataset.item
wx.previewImage({
current: "scene_img",
urls: url.split(',')
})
}
})以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。