小程序模板网

微信小程序播放音频

2018-01-02 过手货

今天做微信小程序涉及到播放音频文件:

使用audio标签来绑定音频路径

 

[html] view plain copy
 
  1. <audio id='audioid' src='{{vidioUrl}}' binderror="audioError" bindplay="audioPlay" bindeneded="playEnd" bindtimeupdate="timeUpdate"> </audio>  

目前没有做到播放下一首的功能,只有暂停和播放。

最上面的播放条是通过progress的percent来实现的,

 

[html] view plain copy
 
  1. <progress percent="{{currtRate}}" stroke-width="2" activeColor="#ffd200" backgroundColor="#bcbcbc"  />  
通过currtRate来实现播放条的已播放长度

界面:

 

[html] view plain copy
 
  1. <view class="ub-ver info-container" style="height:5em;">  
  2.  <!-- 音频播放 -->  
  3.      <view class='ub fonts12 align-items-center' >  
  4.      <view>{{currentTime}}</view>  
  5.      <view class="umw-6"></view>  
  6.      <view class='ub-f1'>  
  7.        <progress percent="{{currtRate}}" stroke-width="2" activeColor="#ffd200" backgroundColor="#bcbcbc"  />  
  8.           <!-- {{vidioUrl}} -->  
  9.      </view>  
  10.      <view class="umw-6"></view>  
  11.      <view>{{duration}}</view>  
  12.    </view>    
  13.  <audio id='audioid' src='{{vidioUrl}}' binderror="audioError" bindplay="audioPlay" bindeneded="playEnd" bindtimeupdate="timeUpdate"> </audio>  
  14.      
  15.    <view class='ub ub-f1 align-items-center' style="justify-content:center">  
  16.   
  17.        <view  class="icon-bofanglist align-items-center" style="background:url('http://inheater-bbs.oss-cn-shenzhen.aliyuncs.com/xcx/icons/bofanglist.png') no-repeat;background-size: contain" bindtap="listClick">  
  18.          </view>  
  19.          <view class="umw1-5"></view>  
  20.          <view wx:if="{{flags}}" class="icon-play align-items-center" style="background:url('http://inheater-bbs.oss-cn-shenzhen.aliyuncs.com/xcx/icons/pause.png') no-repeat;background-size: contain" bindtap="pause">   
  21.          </view>  
  22.           <view wx:if="{{flagp}}" class="icon-next align-items-center" style="background:url('../../images/zanting@3x.png') no-repeat;background-size: contain" bindtap="play">  
  23.          </view>  
  24.          <view class="umw1-5"></view>  
  25.          <view  class="icon-next align-items-center" style="background:url('http://inheater-bbs.oss-cn-shenzhen.aliyuncs.com/xcx/icons/next.png') no-repeat;background-size: contain">  
  26.          </view>  
  27.    </view>  
  28.  </view>  

js文件:

 

[html] view plain copy
 
  1. onLoad: function (options) {  
  2.    var that = this;  
  3.    console.log("topicID" + options.infoId);  
  4.    wx.request({  
  5.      url: 'https://***********/' + *******,  
  6.      header: {  
  7.        'content-type': 'application/json'  
  8.      },  
  9.      success: function (res) {  
  10.        that.setData({  
  11.           vidioUrl: res.data.data.videoUrl  
  12.        })  
  13.       
  14.      }  
  15.    })  
  16.    //时间戳转换为时间日期格式  
  17.    function transDate(mescStr) {  
  18.      var n = mescStr;  
  19.      var date = new Date(n);  
  20.      var Y = date.getFullYear() + '-';  
  21.      var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';  
  22.      var D = date.getDate() < 10 ? '0' + date.getDate() : date.getDate();  
  23.      return (Y + M + D)  
  24.    }  
  25.  },  
  26.  //以下是状态监听  
  27.  audioError: function (resp) {  
  28.    console.log(resp);  
  29.  },  
  30.  audioPlay: function (resp) {  
  31.    console.log(resp);  
  32.    console.log('开始播放');  
  33.  },  
  34.  playEnd: function (resp) {  
  35.    console.log(resp);  
  36.    console.log('播放结束');  
  37.  },  
  38.  timeUpdate: function (resp) {  
  39.    this.setData({  
  40.      currtRate: (100 * resp.detail.currentTime / resp.detail.duration),  
  41.      duration: (resp.detail.duration / 60).toPrecision(2),//总时长 保留两位  
  42.      currentTime: (resp.detail.currentTime / 60).toFixed(2)//toPrecision和toFixed的区别  
  43.    });  
  44.    // this.currentTime = resp.detail.currentTime;//当前时长  
  45.    // console.log(resp);  
  46.  },  
  47.  //以下是操作  
  48.  play: function () {  
  49.    this.audioContext.play();  
  50.    this.setData({  
  51.    flags:true,  
  52.    flagp:false  
  53.    })  
  54.  },  
  55.  pause: function () {  
  56.    this.audioContext.pause();  
  57.    this.setData({  
  58.      flags: false,  
  59.      flagp: true  
  60.    })  
  61.  },  
  62.  audioStart: function () {  
  63.    this.audioCtx.seek(0)//重新播放  
  64.  },  

实现了音频的播放,对于下一首播放,目前没有头绪,刚接触两天,明天继续做


易优小程序(企业版)+灵活api+前后代码开源 码云仓库:starfork
本文地址:https://www.eyoucms.com/wxmini/doc/course/18341.html 复制链接 如需定制请联系易优客服咨询:800182392 点击咨询
QQ在线咨询