微信小程序音頻播放組件 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 小程序資源下載站

相關推薦

發表評論

微信掃一掃

微信掃一掃

微信掃一掃,分享到朋友圈

微信小程序音頻播放組件 InnerAudioContext 教程
返回頂部

顯示

忘記密碼?

顯示

顯示

獲取驗證碼

Close
捕鱼王是正规平台吗