AD:靠谱的微信小程序外包开发

admin

admin

发表于 2017-02-05 23:49:00

微信 小程序开发组件:媒体组件audio,image,video-微信 小程序开发教程


audio

音频。

属性名类型默认值说明
idString
video 组件的唯一标识符
srcString
要播放音频的资源地址
loopBooleanfalse是否循环播放
controlsBooleantrue是否显示默认控件
posterString
默认控件上的音频封面的图片资源地址,如果 controls 属性值为 false 则设置 poster 无效
nameString未知音频默认控件上的音频名字,如果 controls 属性值为 false 则设置 name 无效
authorString未知作者默认控件上的作者名字,如果 controls 属性值为 false 则设置 author 无效
binderrorEventHandle
当发生错误时触发 error 事件,detail = {errMsg: MediaError.code}
bindplayEventHandle
当开始/继续播放时触发play事件
bindpauseEventHandle
当暂停播放时触发 pause 事件
bindtimeupdateEventHandle
当播放进度改变时触发 timeupdate 事件,detail = {currentTime, duration}
bindendedEventHandle
当播放到末尾时触发 ended 事件

MediaError.code

返回错误码描述
MEDIA_ERR_ABORTED获取资源被用户禁止
MEDIA_ERR_NETWORD网络错误
MEDIA_ERR_DECODE解码错误
MEDIA_ERR_SRC_NOT_SUPPOERTED不合适资源

示例代码:

<!-- audio.wxml --><audio poster="{{poster}}" name="{{name}}" author="{{author}}" src="{{src}}" id="myAudio" controls loop></audio><button type="primary" bindtap="audioPlay">播放</button><button type="primary" bindtap="audioPause">暂停</button><button type="primary" bindtap="audio14">设置当前播放时间为14秒</button><button type="primary" bindtap="audioStart">回到开头</button>
// audio.jsPage({
  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',
  },
  audioPlay: function () {    this.audioCtx.play()
  },
  audioPause: function () {    this.audioCtx.pause()
  },
  audio14: function () {    this.audioCtx.seek(14)
  },
  audioStart: function () {    this.audioCtx.seek(0)
  }
})

audio

相关api:wx.createAudioContext

扩展阅读:

微信 小程序开发组件-微信 小程序开发教程

微信 小程序开发组件:视图容器view,scroll-view,swiper-微信 小程序开发教程

微信 小程序开发组件:基础内容icon,text,progress-微信 小程序开发教程

微信 小程序开发组件:表单组件button,form,input,picker-微信 小程序开发教程

微信 小程序开发组件:导航navigator-微信 小程序开发教程

微信 小程序开发组件:媒体组件audio,image,video-微信 小程序开发教程

微信 小程序开发组件:地图map-微信 小程序开发教程

[文章]  微信 小程序开发组件:画布canvas-微信 小程序开发教程

微信 小程序开发组件:客服会话contact-button-微信 小程序开发教程

扩展阅读:

信小程序开发组件:媒体组件audio,image,video-微信 小程序开发教程

音频audio-媒体组件-微信小程序组件-微信 小程序开发教程

图片image-媒体组件-微信小程序组件-微信 小程序开发教程

视频video-媒体组件-微信小程序组件-微信 小程序开发教程


267阅读 | 0评论
你的回应
写文章

1468