audio
音频。
注意:1.6.0 版本开始,该组件不再维护。建议使用能力更强的 wx.createInnerAudioContext 接口
MediaError.code
例如:
效果展示
代码
index.wxml
<!--
id:audio 组件的唯一标识符
src:要播放音频的资源地址
loop:false 是否循环播放
controls:false 是否显示默认控件
poster 默认控件上的音频封面的图片资源地址,如果 controls 属性值为 false 则设置 poster 无效
name 默认控件上的音频名字,如果 controls 属性值为 false 则设置 name 无效
author 默认控件上的作者名字,如果 controls 属性值为 false 则设置 author 无效
binderror 当发生错误时触发 error 事件,detail = {errMsg: MediaError.code}
bindplay 当开始/继续播放时触发play事件
bindpause 当暂停播放时触发 pause 事件
bindtimeupdate 当播放进度改变时触发 timeupdate 事件,detail = {currentTime, duration}
bindended 当播放到末尾时触发 ended 事件
-->
<view class="contentView">
<text class="audio_title">audio音频</text>
<audio src="{{current.src}}" loop="{{true}}" poster="{{current.poster}}" name="{{current.name}}" author="{{current.author}}" action="{{audioAction}}" bindplay="audioPlayed" bindtimeupdate="audioTimeUpdated" controls="{{true}}"></audio>
<text class="audio_title">进度</text>
<slider bindchange="timeSliderChanged"/>
<text class="audio_title">播放速率</text>
<slider min="1" max="4" bindchange="playbackRateSliderChanged" />
<button bindtap="playAudio">播放</button>
<button bindtap="pauseAudio">暂停</button>
</view>
index.wxss
.audio_title {
margin-top: 50rpx;
margin-left: 50rpx;
}
audio{
margin-top: 10rpx;
margin-left: 50rpx;
width: 90%
}
slider{
margin-top: 10rpx;
margin-left: 50rpx;
width: 90%
}
button{
margin: 20rpx;
}
index.js
Page({
data: {
current: {
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',
},
audioAction: {
method: 'pause'
}
},
//控件上的播放
audioPlayed: function (e) {
console.log('控件上的播放')
},
//当播放进度改变时触发,如果设置了进度条必须添加
audioTimeUpdated: function (e) {
this.duration = e.detail.duration;
},
//进度
timeSliderChanged: function (e) {
if (!this.duration)
return;
var time = this.duration * e.detail.value / 100;
this.setData({
audioAction: {
method: 'setCurrentTime',
data: time
}
});
},
//播放速率
playbackRateSliderChanged: function (e) {
this.setData({
audioAction: {
method: 'setPlaybackRate',
data: e.detail.value
}
})
},
//播放
playAudio: function () {
this.setData({
audioAction: {
method: 'play'
}
});
},
//暂停
pauseAudio: function () {
this.setData({
audioAction: {
method: 'pause'
}
});
}
})
|
请发表评论