当前位置：首页 > 资讯 > 技术文档

微信小程序 audio 组件实例详解

时间：2021-08-18 18:14 编辑：来源：阅读：
扫一扫，手机访问

摘要：微信小程序 audio 组件实例详解

[img]http://files.jb51.net/file_images/article/201609/201692892317633.gif?201682892333[/img] 音频播放已经封装的很好！只需配合属性设置即可！（method和data配合使用） [b]主要属性：[/b] [img]http://files.jb51.net/file_images/article/201609/201692892357130.png?201682892433[/img] [img]http://files.jb51.net/file_images/article/201609/201692892631303.png?201682892651[/img] [img]http://files.jb51.net/file_images/article/201609/201692892504540.png?201682892523[/img] [img]http://files.jb51.net/file_images/article/201609/201692892604344.png?201682892625[/img] wxml

<audio
 action="{{action}}"
 src='http://sc1.111ttt.com/2016/1/09/26/202261732256.mp3'
 poster= 'http://avatar.csdn.net/E/3/9/1_u014360817.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>

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
 }
 })
}
})

[b]相关文章：[/b] [url=http://www.1sucai.cn/article/93584.htm]hello WeApp [/url] [url=http://www.1sucai.cn/article/93618.htm]icon组件 Window [/url] [url=http://www.1sucai.cn/article/93627.htm]text组件[/url] [url=http://www.1sucai.cn/article/93655.htm]switch组件[/url] [url=http://www.1sucai.cn/article/93592.htm]tabBar底部导航[/url] [url=http://www.1sucai.cn/article/93629.htm] progress组件[/url] [url=http://www.1sucai.cn/article/93656.htm]action-sheet[/url] [url=http://www.1sucai.cn/article/93598.htm]应用生命周期[/url] [url=http://www.1sucai.cn/article/93632.htm]button组件[/url] [url=http://www.1sucai.cn/article/93672.htm]modal组件页面生命周期[/url] [url=http://www.1sucai.cn/article/93634.htm]checkbox组件 [/url] [url=http://www.1sucai.cn/article/93675.htm]toast组件[/url] [url=http://www.1sucai.cn/article/93603.htm]模块化详 [/url] [url=http://www.1sucai.cn/article/93637.htm]form组件详 [/url] [url=http://www.1sucai.cn/article/93679.htm] loading 组件数据绑定[/url] [url=http://www.1sucai.cn/article/93643.htm]input 组件[/url] [url=http://www.1sucai.cn/article/93680.htm]navigator 组件[/url] [url=http://www.1sucai.cn/article/93611.htm]View组件[/url] [url=http://www.1sucai.cn/article/93645.htm]picker组件[/url] [url=http://www.1sucai.cn/article/93681.htm] audio 组件[/url] [url=http://www.1sucai.cn/article/93612.htm]scroll-view组件[/url] [url=http://www.1sucai.cn/article/93649.htm]radio组件[/url] [url=http://www.1sucai.cn/article/93690.htm] video组件[/url] [url=http://www.1sucai.cn/article/93616.htm]swiper组件[/url] [url=http://www.1sucai.cn/article/93654.htm]slider组件[/url] [url=http://www.1sucai.cn/article/93688.htm] Image组件[/url]

全部评论(0)

上一篇：微信小程序上滑加载下拉刷新（onscrollLower）分批加载数据（二）
下一篇：微信小程序跳转方式总结

资讯排行榜
更多>>