您当前的位置: 首页 > 知识百科 > 微信小程序播放本地音乐怎么开发和使用?

微信小程序播放本地音乐怎么开发和使用?

时间:2023-07-01 14:05 阅读数:33 人阅读 分类:知识百科

  很多年轻人都喜欢用手机听音乐,所以经常会下载不同类型的播放音乐的App,这一类App多了就会很占内存,这时候,小程序特点不占内存就起到作用了。大家可以试着使用微信小程序播放本地音乐,毕竟微信小程序播放本地音乐既可以满足大家的需求,又让使用过程更加简单便捷。那么微信小程序播放本地音乐怎么设置呢?

  小程序音频组件属*如下:

  属*名类型默认值说明

  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不合适资源

  wx.createAudioContext(audioId)

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

  方法参数说明

  play无播放

  pause无暂停

  seekposition跳转到指定位置,单位 s

  wxml

  播放

  暂停

  设置当前播放时间为14秒

  回到开头

  js

  Page({

  onReady: function (e) {

  // 使用 wx.createAudioContext 获取 audio 上下文 context

  this.audioCtx = wx.createAudioContext('myAudio')

  },

  data: {

  poster: 'y.gtimg/music/photo_new/T002R300x300M000003rsKF44GyaSk.jpg?max_age=2592000',

  name: '此时此刻',

  author: '许巍',

  src: 'ws.stream.qqmusic.qq/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)

  },

  funplay: function(){

  console.log("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);

  }

  })

  小程序实现效果

  微信小程序播放本地音乐设置成功之后,大家就不用在手机上下载那么多播放音乐的App了,一个小程序就可以实现相应的功能,而且还不占内存,即用即关。怎么样,是不是觉得很方便呢?想要尝试一下的话,大家可以对照上述流程进行开发哦。更多相关资料请在微信小程序商店搜索。

  

  微信小程序之录音播放功能上传

  如何实现微信小程序录音在另外的界面播放

  微信小程序API音频播放控制