微信小程序媒體組件audio,微信小程序媒體示例代碼

—— 2017 ——

12/22

00:00

來源：

作者：未知

欄目：小程序開發(fā)

2017/12/22 0:00:00 來源：不詳作者：未知

audio

音頻。

屬性名	類型	默認(rèn)值	說明
id	String		audio 組件的唯一標(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ā)生錯(cuò)誤時(shí)觸發(fā) error 事件，detail = {errMsg: MediaError.code}
bindplay	EventHandle		當(dāng)開始/繼續(xù)播放時(shí)觸發(fā)play事件
bindpause	EventHandle		當(dāng)暫停播放時(shí)觸發(fā) pause 事件
bindtimeupdate	EventHandle		當(dāng)播放進(jìn)度改變時(shí)觸發(fā) timeupdate 事件，detail = {currentTime, duration}
bindended	EventHandle		當(dāng)播放到末尾時(shí)觸發(fā) ended 事件

MediaError.code

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

示例代碼：

<!-- audio.wxml -->
<audio poster="{{poster}}" name="{{name}}" author="{
【本站聲明】 
  1、本站文章中所選用的圖片及文字來源于網(wǎng)絡(luò)以及用戶投稿，由于未聯(lián)系到知識產(chǎn)權(quán)人或未發(fā)現(xiàn)有關(guān)知識產(chǎn)權(quán)的登記，如有知識產(chǎn)權(quán)人并不愿意我們使用，如果有侵權(quán)請立即聯(lián)系。 
  2、本網(wǎng)站不對文章中所涉及的內(nèi)容真實(shí)性、準(zhǔn)確性、可靠性負(fù)責(zé)，僅系客觀性描述，如您需要了解該類商品/服務(wù)詳細(xì)的資訊，請您直接與該類商品/服務(wù)的提供者聯(lián)系。


KESION 科汛軟件
KESION 科汛軟件是國內(nèi)領(lǐng)先的在線教育軟件及私域社交電商軟件服務(wù)提供商，長期專注于為企業(yè)提供在線教育軟件及社交電商SaaS平臺(tái)解決方案。
公司核心產(chǎn)品云開店SaaS社交電商服務(wù)平臺(tái)、在線教育SaaS服務(wù)平臺(tái)、教育企業(yè)數(shù)字化SaaS云平臺(tái)、企微營銷助手、私有化獨(dú)立部署品牌網(wǎng)校和在線教育咨詢等。
KESION 不斷通過技術(shù)創(chuàng)新，提供產(chǎn)品和服務(wù)，助力企業(yè)向數(shù)字化轉(zhuǎn)型，通過科技驅(qū)動(dòng)商業(yè)革新，讓商業(yè)變得更智慧！


▼點(diǎn)擊進(jìn)入科汛官網(wǎng)了解更多


}" src="{{src}}" id="myAudio" controls loop></audio>

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

// audio.js
Page({
  onReady: function (e) {
    // 使用 wx.createAudioContext 獲取 audio 上下文 context
    this.audioCtx = wx.createAudioContext('myAudio')
  },
  data: {
    poster: 'http://www.fluoresville.cn/UploadFiles/2021-7/82/b1132703680672186629HKZ.jpg?max_age=2592000',
    name: '此時(shí)此刻',
    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)
  }
})

相關(guān)api：wx.createAudioContext

更多微信小程序開發(fā)教程，可以關(guān)注。

熱門標(biāo)簽

微信小程序開發(fā) 微信小程序

上/下篇

微信小程序?qū)Ш絥avigator,navigator頁面鏈接

navigator 頁面鏈接。屬性名類型默認(rèn)值說明 url String 應(yīng)用內(nèi)的跳轉(zhuǎn)鏈接 open-type String navigate 跳轉(zhuǎn)方式 delta Number 當(dāng) open

微信小程序開發(fā)微信小程序 2017/12/22 0:00:00
微信小程序表單組件大全,10大表單組件

wxapp表單組件 button wxapp表單組件 checkbox wxapp表單組件 form wxapp表單組件 input wxapp表單組件 label wxapp表單組件 picker

微信小程序開發(fā)微信小程序 2017/12/22 0:00:00