小程序音频播放带进度

最新推荐文章于 2022-11-12 16:25:17 发布

遥远sunshine

最新推荐文章于 2022-11-12 16:25:17 发布

阅读量341

点赞数

分类专栏：小程序文章标签：小程序音视频

本文链接：https://blog.csdn.net/xiangnianziyou/article/details/127231147

版权

小程序专栏收录该内容

3 篇文章 0 订阅

订阅专栏

wxml

<view class="page">
    
<view wx:if="{{ paused }}" class="audio-btn" bindtap="audioPlay">播放</view>
<view wx:else class="audio-btn btn-pause" bindtap="audioPause">暂停</view>
                          
<!-- 时长 -->
<view class="audio-number">{{forNowTime?forNowTime:0}}s</view>
<slider class="audio-slider" activeColor="#5189FF" block-size="12" value="{{current}}" max="{{duration}}" step="0.01" bindchanging="audioChanging" bindchange="audioChange">
</slider>
    <view class="audio-number">{{forAllTime?forAllTime:0}}s</view>
</view>

index.js

const myAudio = wx.createInnerAudioContext()
myAudio.src="/pages/index/car.mp3";
Page({
    data:{
        forNowTime: '0', //当前播放时间
        forAllTime: '0', //总时长
        current: 0, //slider当前进度
        duration: 0, //总时间 秒
        seek: false, //是否处于拖动状态
        paused: true, //是否处于暂停状态
     },
     onLoad: function (options) {// 音频播放初始化
        this.audioInit()   
     }, 
     onReady:function(){
         myAudio.play();
         this.setData({
             paused:false
         })
     },
     audioInit() {
        myAudio.playbackRate = 1.0
         myAudio.onPlay(() => {
            console.log('开始播放')
           console.log(myAudio.playbackRate);
         })
         // 暂停监听
          myAudio.onPause(() => {
              console.log('停止播放')
          })
          // 监听音频进入可以播放状态的事件。但不保证后面可以流畅播放，必须要这个监听，不然播放时长更新监听不会生效，不能给进度条更新值
         myAudio.onCanplay(() => {
            myAudio.duration
         })
                // 播放时长更新监听
        myAudio.onTimeUpdate(() => {
            // 监听播放进度，更新页面播放时长和进度条进度
            this.setData({
                forNowTime: parseInt(myAudio.currentTime),
                forAllTime: parseInt(myAudio.duration),
                current: myAudio.currentTime,
                duration: myAudio.duration
            })
        })
        // 播放出错监听
        myAudio.onError((res) => {
            console.log(res.errMsg)
            console.log(res.errCode)
        })
            
     },
     audioPlay:function(){
         this.setData({ 
              paused:false
         })
         myAudio.play()
     },
     audioPause:function(){
         this.setData({
             paused:true
         });
         myAudio.pause();
     },
     audioChanging(val) {
        myAudio.seek(val.detail.value);
        this.setData({
            forNowTime: parseInt(val.detail.value)
        })

     },
     audioChange(val) {
        myAudio.seek(val.detail.value)
     },
     onUnload: function () {
        this.audioPause()
        myAudio.stop()
     }
  })

参考来源：

微信小程序音频播放 InnerAudioContext 的用法