微信小程序 audio音频播放

audio

audio为音频组件,我们可以轻松的在小程序中播放音频。

属性名 类型 默认值 说明 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 事件

错误返回码:MediaError.code

返回错误码 描述

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

wx.createAudioContext(audioId)

    创建并返回audio上下文audioContext对象,控制音频的播放暂停与跳转。

方法 参数 说明 play 无 播放 pause 无 暂停 seek position 跳转到指定位置,单位 s

wxml

<!-- 
  poster:音频封面图片
  name:歌名
  author:歌手
  src:音频地址
  controls:是否显示默认控件,也就是下面这个东东
                       
  loop:是否循环播放
  id:标注唯一组件以this.audioCtx = wx.createAudioContext('myAudio')获取控制组件的对象。
  bindplay:播放时触发该事件
  bindpause:停止时触发该事件
  bindtimeupdate:时间改变时触发,该函数携带有参数detail={currentTime, duration}当前时间,持续播放时间
  bindended:播放结束时触发
  binderror;播放错误时调用,携带参数detail = {errMsg: MediaError.code}

 -->
<audio poster="{{poster}}" name="{{name}}" author="{{author}}" src="/UploadFiles/2021-04-02/{{src}}">

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"audio play");
 },
 funpause: function(){
   console.log("audio pause");
 },
 funtimeupdate: function(u){
   console.log(u.detail.currentTime);
   console.log(u.detail.duration);
 },
 funended: function(){
   console.log("audio end");
 },
 funerror: function(u){
   console.log(u.detail.errMsg);
 }
})

效果


 微信小程序  audio音频播放详解及实例

 今天早上发现微信小程序的官方文档在实时跟新,之前的有些标签或者方法不见了。以上是控制audio组件的方法是根据组件的唯一id生成相应的实例对象,通过对象的各种发放来控制组件。我现在看到的官方文档是通过有个action属性,给属性指定特定的值组件就会执行特定的动作。

method 描述 data play 播放   pause 暂停   setPlaybackRate 调整速度 倍速 setCurrentTime 设置当前时间 播放时间

.wxml



<audio poster="{{poster}}" name="{{name}}" author="{{author}}" src="/UploadFiles/2021-04-02/1434188181.mp3">

.js



Page({
 data: {
  poster: 'http://pic.pimg.tw/pam86591/1408719752-3322564110_n.jpg',
  name: 'Sugar',
  author: 'Maroon 5'
 },
 audioPlay: function () {
  this.setData({
   action: {
    method: 'play'
   }
  });
 },
 audioPause: function () {
  this.setData({
   action: {
    method: 'pause'
   }
  });
 },
 audioPlaybackRateSpeedUp: function () {
  this.setData({
   action: {
    method: 'setPlaybackRate',
    data: 2//加快速度
   }
  });
 },
 audioPlaybackRateSlowDown: function () {
  this.setData({
   action: {
    method: 'setPlaybackRate',
    data: 0.5//小于零放慢速度
   }
  });
 },
 audio14: function () {
  this.setData({
   action: {
    method: 'setCurrentTime',
    data: 14
   }
  });
 },
 audioStart: function () {
  this.setData({
   action: {
    method: 'setCurrentTime',
    data: 0
   }
  });
 }
})

效果

微信小程序  audio音频播放详解及实例
 

上一种方法好像没有不能控制播放速度,这种方法相比上一种比较方便,并且效率上应该也比较高。

 感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

标签:
微信小程序,audio,微信小程序,audio实例代码,微信小程序,audio详解

免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
狼山资源网 Copyright www.pvsay.com

评论“微信小程序  audio音频播放详解及实例”

暂无“微信小程序  audio音频播放详解及实例”评论...