• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

小程序开发之组件audio(音频)

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

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






鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap