小程序极速实战开发《二十一》audio音频

发布：2018-01-25 16:27浏览：次来源：网络作者：tianshu

组件说明:

组件用法：

小程序极速实战开发《二十一》audio音频(图1)

wxml

<audio poster="{{poster}}" name="{{name}}" author="{{author}}" src="{{src}}" id="myAudio" controls loop></audio>
<button type="primary" bindtap="audioPlay">播放</button>
<button type="primary" bindtap="audioPause">暂停</button>
<button type="primary" bindtap="audio14">设置当前播放时间为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: 'https://y.gtimg.cn/music/photo_new/T002R300x300M000003rsKF44GyaSk.jpg?max_age=2592000',
name: '此时此刻',
author: '许巍',
src: 'https://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()
console.log("audioPause");
},
audio14: function () {
this.audioCtx.seek(14)
console.log("跳至第14秒播放");
},
audioStart: function () {
this.audioCtx.seek(0)
console.log("回到开头")
},
})

主要属性：

属性	类型	说明
id	String	video 组件的唯一标识符
src	String	要播放音频的资源地址
loop	Boolean	是否循环播放
controls	Boolean	是否显示默认控件
poster	String	默认控件上的音频封面的图片资源地址，如果 controls 属性值为 false 则设置 poster 无效
name	String	默认控件上的音频名字，如果 controls 属性值为 false 则设置 name 无效
author	String	默认控件上的作者名字，如果 controls 属性值为 false 则设置 author 无效

属性	类型	说明
binderror	EventHandle	当发生错误时触发 error 事件，detail = {errMsg: MediaError.code}
bindplay	EventHandle	当开始/继续播放时触发play事件
bindpause	EventHandle	当暂停播放时触发 pause 事件
bindtimeupdate	EventHandle	当播放进度改变时触发 timeupdate 事件，detail = {currentTime, duration}
bindended	EventHandle	当播放到末尾时触发 ended 事件

免责声明：本站所有文章和图片均来自用户分享和网络收集，文章和图片版权归原作者及原出处所有，仅供学习与参考，请勿用于商业用途，如果损害了您的权利，请联系网站客服处理。