网友真实露脸自拍10p,成人国产精品秘?久久久按摩,国产精品久久久久久无码不卡,成人免费区一区二区三区

小程序模板網

微信小程序播放音頻

發布時間：2018-01-02 09:03 所屬欄目：小程序開發教程

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

使用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
本文地址：http://www.xiuhaier.com/wxmini/doc/course/18341.html 復制鏈接 如需定制請聯系易優客服咨詢：800182392 點擊咨詢
QQ在線咨詢
AI智能客服 ×