免费国产欧美国日产_少妇AV一区二区三区无码_蜜桃精品av无码喷奶水小说_jk18禁网站视频_精产国品一二三级产品区别_被夫の上司に犯波多野结衣_78m成人手机免费看_最爽最刺激18禁视频_偷偷色噜狠狠狠狠的777米奇

易優(yōu)GEO 重磅上線 ~ 一站式GEO優(yōu)化工具，讓豆包、文心一言、DeepSeek 在回答中主動(dòng)推薦你的品牌，搶占AI流量入口！  點(diǎn)擊查看

小程序模板網(wǎng)

微信小程序播放音頻

發(fā)布時(shí)間：2018-01-02 09:03 所屬欄目：小程序開(kāi)發(fā)教程

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

使用audio標(biāo)簽來(lái)綁定音頻路徑

 

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

目前沒(méi)有做到播放下一首的功能，只有暫停和播放。

最上面的播放條是通過(guò)progress的percent來(lái)實(shí)現(xiàn)的，

 

[html] view plain copy
 
  1. <progress percent="{{currtRate}}" stroke-width="2" activeColor="#ffd200" backgroundColor="#bcbcbc"  />  
通過(guò)currtRate來(lái)實(shí)現(xiàn)播放條的已播放長(zhǎng)度

界面：

 

[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/[email protected]') 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.    //時(shí)間戳轉(zhuǎn)換為時(shí)間日期格式  
  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.  //以下是狀態(tài)監(jiān)聽(tīng)  
  27.  audioError: function (resp) {  
  28.    console.log(resp);  
  29.  },  
  30.  audioPlay: function (resp) {  
  31.    console.log(resp);  
  32.    console.log('開(kāi)始播放');  
  33.  },  
  34.  playEnd: function (resp) {  
  35.    console.log(resp);  
  36.    console.log('播放結(jié)束');  
  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),//總時(shí)長(zhǎng) 保留兩位  
  42.      currentTime: (resp.detail.currentTime / 60).toFixed(2)//toPrecision和toFixed的區(qū)別  
  43.    });  
  44.    // this.currentTime = resp.detail.currentTime;//當(dāng)前時(shí)長(zhǎng)  
  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.  },  

實(shí)現(xiàn)了音頻的播放，對(duì)于下一首播放，目前沒(méi)有頭緒，剛接觸兩天，明天繼續(xù)做


易優(yōu)小程序（企業(yè)版）+靈活api+前后代碼開(kāi)源 碼云倉(cāng)庫(kù):starfork
本文地址：http://www.szcjxy.com/wxmini/doc/course/18341.html 復(fù)制鏈接 如需定制請(qǐng)聯(lián)系易優(yōu)客服咨詢： 點(diǎn)擊咨詢
在線客服