小程序开发之媒体组件(audio)
程序员文章站
2022-06-14 21:11:50
...
效果图
属性
参考:audio
实例
- app.js
//app.js
App({
onLaunch: function () {
console.log('App Launch')
},
onShow: function () {
console.log('App Show')
},
onHide: function () {
console.log('App Hide')
},
globalData: {
hasLogin: false
}
})
- app.json
{
"pages": [
"pages/audio/audio"
],
"window": {
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "WeChat",
"navigationBarTextStyle": "black"
},
"style": "v2",
"sitemapLocation": "sitemap.json"
}
- audio.js
Page({
data: {
// text:"这是一个页面"
action: {
method: ''
}
},
audioPlay: function () {
this.setData({
action: {
method: 'play'
}
})
},
audioPause: function () {
this.setData({
action: {
method: 'pause'
}
})
},
audioPlaybackRateNormal: function () {
this.setData({
action: {
method: 'setPlaybackRate',
data: 1
}
})
},
audioPlaybackRateSlowDown: function () {
this.setData({
action: {
method: 'setPlaybackRate',
data: 0.5
}
})
}
})
- audio.json
{
"navigationBarTitleText": "audio组件"
}
- audio.wxml
<audio
action="{{action}}"
src='http://music.163.com/song/media/outer/url?id=1293886117.mp3'
poster= 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1582439550062&di=ae1b094eefa18f580c6444155051b038&imgtype=0&src=http%3A%2F%2Fi0.hdslb.com%2Fbfs%2Farticle%2Ff66ccb39141487dda7af91ab13c40be76afa4c41.jpg'
controls="true"
name="年少有为"
author="李荣浩"/>
<button type="primary" bindtap="audioPlay">播放</button>
<button type="primary" bindtap="audioPause">暂停</button>
<!--正常速度-->
<button type="primary" bindtap="audioPlaybackRateNormal">调为1倍速</button>
<!--慢放-->
<button type="primary" bindtap="audioPlaybackRateSlowDown">调为0.5倍速</button>
- audio.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;
}