微信小程序音频播放组件 InnerAudioContext 教程

微信小程序自从废弃 Audio 组件后，音频播放功能的实现，就相对麻烦了一点。但是，采用 InnerAudioContext 组件，在音频播放功能上确实比原来的 Audio 要强。只是，对许多不熟悉这个组件的开发者而言，就相对没有那么友好。本着折腾的精神，尝试折腾写一篇教程。

设置页面音频相关数据

data {
    isPlaying: false,
    progress: 0,
    duration: 0,
    progressText: '00:00',
    durationText: '00:00',
    audioUrl: 'http://www.abc.com/myaudio.mp3'
}

监听页面加载，注册音频播放

onLoad: function() {
    this.audioContext = wx.createInnerAudioContext("myaudio")
    this.audioContext.src = this.data.audioUrl
    this.audioContext.onEnded((res) => {
        console.log('播放音频')
    })
    this.audioContext.onError((res) => {
        console.log('播放音频失败',res)
    })
    this.audioContext.onStop((res) => {
        console.log('播放结束!')
    })
}

监听页面卸载，停止音频播放

onUnload: function () {
    if(this.data.isPlaying) {
        this.audioContext.stop()
    }
}

格式化时间

formatTime: function(s) {
    let t = ''
    s = Math.floor(s)
    if (s > -1) {
        let min = Math.floor(s / 60) % 60
        let sec = s % 60
        if (min < 10) {
            t += "0"
        }
        t += min + ":"
        if (sec < 10) {
            t += "0"
        }
        t += sec
    }
    return t
}

监听播放时间进度

audioPlayTime: function(that, manager, cancel) {
    if(that.data.isPlaying) {
        setTimeout(function() {
            if(that.data.isPlaying) {
                that.setData({
                    progress: Math.ceil(manager.currentTime),
                    progressText: that.formatTime(Math.ceil(manager.currentTime)),
                    duration: Math.ceil(manager.duration),
                    durationText: that.formatTime(Math.ceil(manager.duration))
                })
                that.audioPlayTime(that, manager)
            }
        }, 1000)
    }
}

监听播放进度改变

sliderChange: function(e) {
    this.audioContext.pause()
    this.audioContext.seek(e.detail.value)
    this.setData({
        progressText: this.formatTime(e.detail.value)
    })
    setTimeout(function() {
        this.audioContext.play()
    }, 1000)
}

监听音频播放/暂停

playAudio:function() {
    let that = this
    if (this.data.isPlaying) {
        this.audioContext.pause()
        this.setData({ isPlaying: false })
    } else {
        this.audioContext.play()
        this.setData({ isPlaying: true })
    }
    this.audioPlayTime(that, this.audioContext)
}

微信小程序音频播放模板

<view class="progress">
    <image class="button" bindtap="playAudio" src="{{isPlaying?'../../images/pause.png':'../../images/play.png'}}"></image>
    <slider class="slider" bindchange="sliderChange" value="{{progress}}" step="1" min="0" max='{{duration}}' activeColor="#333333" block-size="12" block-color="#333333" />
    <text>{{progressText}}</text>
    <view> / </view>
    <text>{{durationText}}</text>
</view>

微信小程序音频播放样式

.progress {
    display: flex;
    align-items: center;
    font-size: 10pt;
    color: rgb(87, 49, 49);
    text-align: center;
}
.progress .slider {
    flex: 1;
}
.progress text {
    flex-basis: 90rpx;
}
.progress .button {
    width: 64rpx;
    height: 64rpx;
}

大概的思路就是这样子，想要实现音频播放功能的朋友，可以折腾试试

本文出处：WordPress 小程序资源下载站