微信小程序API之audio
wxml:
<text>pages/audio/audio.wxml</text>
<view class="container">
</view>
<button bindtap="tapPlay">播放</button>
<button bindtap="tapPause">暂停 </button>
<slider
min="0"
max="100"
step="1"
disabled="{{true}}"
value="0"
show-value="{{true}}"
backgroundColor="#e9e9e9"
block-size="20"
block-color="#ffffff"
></slider>
js:
//音频实例
const audio=wx.createInnerAudioContext();
// pages/audio/audio.js
Page({
/**
* 页面的初始数据
*/
data: {
value:0
},
//播放
tapPlay(e){
audio.play()
console.log('正在播放ing...')
//半秒监听一次
setTimeout(()=>{
//监听播放进度
audio.onTimeUpdate(()=>{
//输出音频总时长
console.log(audio.duration);
//输出当前的播放位置
console.log(audio.currentTime);
//实时更新进度条
this.setData({
value:audio.currentTime
})
})
},500)
},
//暂停
tapPause(e){
audio.pause()
console.log('暂停播放ed...');
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
//是否自动播放
audio.autoplay=false
//地址
audio.src='https://mp32.9ku.com/upload/128/2020/02/13/1002010.mp3'
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})