首页 > 代码库 > 十：audio 音频

十：audio 音频

2024-08-22 11:37:01   221人阅读

属性名类型默认值说明
id String
 
 video 组件的唯一标识符
src String
 
 要播放音频的资源地址
loop Boolean false 是否循环播放
controls Boolean true 是否显示默认控件
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 事件
这是标签audio的一些属性。。如果当。audio出现错误的时候 如 binderror:function(e){}这个方法时 e.detail.errMsg会报如下错误。
返回错误码描述
MEDIA_ERR_ABORTED 获取资源被用户禁止
MEDIA_ERR_NETWORD 网络错误
MEDIA_ERR_DECODE 解码错误
MEDIA_ERR_SRC_NOT_SUPPOERTED 不合适资源
例外 audio 还有一个是 action 属性，这个属性接受的参数 是一个object类型。他有两个值是：method 和 data 
method描述data
play 播放
 
pause 暂停
 
setPlaybackRate 调整速度 倍速
setCurrentTime 设置当前时间 播放时间
另外audio还可可以创建并返回上下文的audioContext对象。。。前端的童鞋可以把他理解成 getElementById。
他的调用方法是  wx.createAudioContext(audioId) 他的方法则如下。
方法参数说明
play 无 播放
pause 无 暂停
seek position(number) 跳转到指定位置，单位 s
/* ---page/test/test.wxml----*/
 
<audio  id="myAudio" 
        poster="{{poster}}" 
        name="{{name}}" 
        author="{{author}}" 
        src="{{src}}"  
        controls loop
        bindplay="audiobindplay"
        bindpause="audiobindpause"
        bindtimeupdate="audiobindtimeupdate"
        bindended="audiobindended"
        binderror="audiobinderror"></audio>
 
<button type="primary" bindtap="audioPlay">播放</button>
<button type="primary" bindtap="audioPause">暂停</button>
<button type="primary" bindtap="audio14">设置当前播放时间为14秒</button>
 
/* ---page/test/test.wxml----*/
 
/* ---page/test/test.js----*/
 
// audio.js
Page({
  onReady: function (e) {
    // 使用 wx.createAudioContext 获取 audio 上下文 context
    this.audioCtx = wx.createAudioContext(‘myAudio‘)
  },
  data: {
    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‘,
  },
  //以下是 js的api
  audioPlay: function () {
    this.audioCtx.play()
  },
  audioPause: function () {
    this.audioCtx.pause()
  },
  audio14: function () {
    this.audioCtx.seek(14)
  },
  //以下是audio的属性。
  audiobindplay:function(e){
    console.log("音频开始播放")
  },
  audiobindpause:function(e){
    console.log("音频暂停中")
  },
  audiobindtimeupdate:function(e){
    console.log("修改了当前的播放时间。")
  },
  audiobindended:function(e){
    console.log("音频播放结束")
  },
  audiobinderror:function(e){
    console.log("音频出错了。\n",e.detail.errMsg)
  }
})
 
/* ---page/test/test.js----*/    
那么主要注意的是  audiobindtimeupdate 这个方法 他并不是用户修改了当前播放时间才执行，而是音乐在播放的时候他都会执行N次。具体执行一下就好了。
 
 

十：audio 音频


联系
我们