欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

微信小程序  audio音頻播放詳解及實例

 更新時間:2016年11月02日 16:15:52   投稿:lqh  
這篇文章主要介紹了微信小程序 audio音頻播放詳解及實例的相關(guān)資料,附有實例代碼及實現(xiàn)效果圖,對初學(xué)者是個很好的幫助,需要的朋友可以參考下

 微信小程序 audio音頻播放

audio

audio為音頻組件,我們可以輕松的在小程序中播放音頻。

屬性名 類型 默認(rèn)值 說明
id String   video 組件的唯一標(biāo)識符,
src String   要播放音頻的資源地址
loop Boolean false 是否循環(huán)播放
controls Boolean true 是否顯示默認(rèn)控件
poster String   默認(rèn)控件上的音頻封面的圖片資源地址,如果 controls 屬性值為 false 則設(shè)置 poster 無效
name String 未知音頻 默認(rèn)控件上的音頻名字,如果 controls 屬性值為 false 則設(shè)置 name 無效
author String 未知作者 默認(rèn)控件上的作者名字,如果 controls 屬性值為 false 則設(shè)置 author 無效
binderror EventHandle   當(dāng)發(fā)生錯誤時觸發(fā) error 事件,detail = {errMsg: MediaError.code}
bindplay EventHandle   當(dāng)開始/繼續(xù)播放時觸發(fā)play事件
bindpause EventHandle   當(dāng)暫停播放時觸發(fā) pause 事件
bindtimeupdate EventHandle   當(dāng)播放進(jìn)度改變時觸發(fā) timeupdate 事件,detail = {currentTime, duration}
bindended EventHandle   當(dāng)播放到末尾時觸發(fā) ended 事件

錯誤返回碼:MediaError.code

返回錯誤碼 描述

返回錯誤碼 描述
MEDIA_ERR_ABORTED 獲取資源被用戶禁止
MEDIA_ERR_NETWORD 網(wǎng)絡(luò)錯誤
MEDIA_ERR_DECODE 解碼錯誤
MEDIA_ERR_SRC_NOT_SUPPOERTED 不合適資源

wx.createAudioContext(audioId)

    創(chuàng)建并返回audio上下文audioContext對象,控制音頻的播放暫停與跳轉(zhuǎn)。

方法 參數(shù) 說明
play 播放
pause 暫停
seek position 跳轉(zhuǎn)到指定位置,單位 s

wxml

<!-- 
  poster:音頻封面圖片
  name:歌名
  author:歌手
  src:音頻地址
  controls:是否顯示默認(rèn)控件,也就是下面這個東東
                       
  loop:是否循環(huán)播放
  id:標(biāo)注唯一組件以this.audioCtx = wx.createAudioContext('myAudio')獲取控制組件的對象。
  bindplay:播放時觸發(fā)該事件
  bindpause:停止時觸發(fā)該事件
  bindtimeupdate:時間改變時觸發(fā),該函數(shù)攜帶有參數(shù)detail={currentTime, duration}當(dāng)前時間,持續(xù)播放時間
  bindended:播放結(jié)束時觸發(fā)
  binderror;播放錯誤時調(diào)用,攜帶參數(shù)detail = {errMsg: MediaError.code}

 -->
<audio poster="{{poster}}" name="{{name}}" author="{{author}}" src="{{src}}" id="myAudio" controls loop bindplay="funplay" bindpause="funpause" bindtimeupdate="funtimeupdate" bindended="funended" binderror="funerror"></audio>

<button type="primary" bindtap="audioPlay">播放</button>
<button type="primary" bindtap="audioPause">暫停</button>
<button type="primary" bindtap="audio14">設(shè)置當(dāng)前播放時間為14秒</button>
<button type="primary" bindtap="audioStart">回到開頭</button>

js

Page({
 onReady: function (e) {
  // 使用 wx.createAudioContext 獲取 audio 上下文 context
  this.audioCtx = wx.createAudioContext('myAudio')
 },
 data: {
  poster: 'http://y.gtimg.cn/music/photo_new/T002R300x300M000003rsKF44GyaSk.jpg?max_age=2592000',
  name: '此時此刻',
  author: '許巍',
  src: 'http://ws.stream.qqmusic.qq.com/M500001VfvsJ21xFqb.mp3?guid=ffffffff82def4af4b12b3cd9337d5e7&uin=346897220&vkey=6292F51E1E384E06DCBDC9AB7C49FD713D632D313AC4858BACB8DDD29067D3C601481D36E62053BF8DFEAF74C0A5CCFADD6471160CAF3E6A&fromtag=46',
 },
 audioPlay: function () {
  this.audioCtx.play()
 },
 audioPause: function () {
  this.audioCtx.pause()
 },
 audio14: function () {
  this.audioCtx.seek(14)
 },
 audioStart: function () {
  this.audioCtx.seek(0)
 },
 funplay: function(){
   console.log("audio play");
 },
 funpause: function(){
   console.log("audio pause");
 },
 funtimeupdate: function(u){
   console.log(u.detail.currentTime);
   console.log(u.detail.duration);
 },
 funended: function(){
   console.log("audio end");
 },
 funerror: function(u){
   console.log(u.detail.errMsg);
 }
})

效果


 

 今天早上發(fā)現(xiàn)微信小程序的官方文檔在實時跟新,之前的有些標(biāo)簽或者方法不見了。以上是控制audio組件的方法是根據(jù)組件的唯一id生成相應(yīng)的實例對象,通過對象的各種發(fā)放來控制組件。我現(xiàn)在看到的官方文檔是通過有個action屬性,給屬性指定特定的值組件就會執(zhí)行特定的動作。

method 描述 data
play 播放  
pause 暫停  
setPlaybackRate 調(diào)整速度 倍速
setCurrentTime 設(shè)置當(dāng)前時間 播放時間

.wxml



<audio poster="{{poster}}" name="{{name}}" author="{{author}}" src="http://qqma.tingge123.com:823/mp3/2015-06-13/1434188181.mp3" action="{{action}}" controls loop></audio>

<button type="primary" bindtap="audioPlay">播放</button>
<button type="primary" bindtap="audioPause">暫停</button>
<button type="primary" bindtap="audioPlaybackRateSpeedUp">調(diào)為2倍速</button>
<button type="primary" bindtap="audioPlaybackRateNormal">調(diào)為1倍速</button>
<button type="primary" bindtap="audioPlaybackRateSlowDown">調(diào)為0.5倍速</button>
<button type="primary" bindtap="audio14">設(shè)置當(dāng)前播放時間為14秒</button>
<button type="primary" bindtap="audioStart">回到開頭</button>

.js



Page({
 data: {
  poster: 'http://pic.pimg.tw/pam86591/1408719752-3322564110_n.jpg',
  name: 'Sugar',
  author: 'Maroon 5'
 },
 audioPlay: function () {
  this.setData({
   action: {
    method: 'play'
   }
  });
 },
 audioPause: function () {
  this.setData({
   action: {
    method: 'pause'
   }
  });
 },
 audioPlaybackRateSpeedUp: function () {
  this.setData({
   action: {
    method: 'setPlaybackRate',
    data: 2//加快速度
   }
  });
 },
 audioPlaybackRateSlowDown: function () {
  this.setData({
   action: {
    method: 'setPlaybackRate',
    data: 0.5//小于零放慢速度
   }
  });
 },
 audio14: function () {
  this.setData({
   action: {
    method: 'setCurrentTime',
    data: 14
   }
  });
 },
 audioStart: function () {
  this.setData({
   action: {
    method: 'setCurrentTime',
    data: 0
   }
  });
 }
})

效果


 

上一種方法好像沒有不能控制播放速度,這種方法相比上一種比較方便,并且效率上應(yīng)該也比較高。

 感謝閱讀,希望能幫助到大家,謝謝大家對本站的支持!

相關(guān)文章

  • js中閉包結(jié)合遞歸等于柯里化原理解析

    js中閉包結(jié)合遞歸等于柯里化原理解析

    這篇文章主要為大家介紹了閉包結(jié)合遞歸等于柯里化的原理解析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2022-07-07
  • 微信小程序 Tab頁切換更新數(shù)據(jù)

    微信小程序 Tab頁切換更新數(shù)據(jù)

    這篇文章主要介紹了微信小程序 Tab頁切換更新數(shù)據(jù)的相關(guān)資料,需要的朋友可以參考下
    2017-01-01
  • 通過修改referer下載文件的方法

    通過修改referer下載文件的方法

    遇到了一個郁悶的事:如果讓Http對象作全局變量,那么onreadystatechange只會在第一次執(zhí)行時觸發(fā),以后都不會觸發(fā)這個事件了。 只好在每次Down文件時重新創(chuàng)建一個XmlHttp對象。
    2008-05-05
  • package.json依賴環(huán)境相關(guān)屬性詳解

    package.json依賴環(huán)境相關(guān)屬性詳解

    這篇文章主要為大家介紹了package.json依賴環(huán)境相關(guān)屬性詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2022-09-09
  • 前端工程化cjs?umd?esm?打包差異詳解

    前端工程化cjs?umd?esm?打包差異詳解

    這篇文章主要為大家介紹了前端工程化cjs?umd?esm?打包差異詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2022-09-09
  • 微信小程序 詳解下拉加載與上拉刷新實現(xiàn)方法

    微信小程序 詳解下拉加載與上拉刷新實現(xiàn)方法

    這篇文章主要介紹了微信小程序 詳解下拉加載與上拉刷新實現(xiàn)方法的相關(guān)資料,這里介紹了兩種實現(xiàn)方法,需要的朋友可以參考下
    2017-01-01
  • 微信小程序 Template詳解及簡單實例

    微信小程序 Template詳解及簡單實例

    這篇文章主要介紹了微信小程序 Template詳解及簡單實例的相關(guān)資料,需要的朋友可以參考下
    2017-01-01
  • 網(wǎng)頁的標(biāo)準(zhǔn),IMG不支持onload標(biāo)簽怎么辦

    網(wǎng)頁的標(biāo)準(zhǔn),IMG不支持onload標(biāo)簽怎么辦

    網(wǎng)頁的標(biāo)準(zhǔn),IMG不支持onload標(biāo)簽怎么辦...
    2006-06-06
  • 最新評論