当前位置:首页 > 新闻动态 > 网站文章

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

来源: 浏览:151 时间:2023-07-25

  很多年轻人都喜欢用手机听音乐,所以经常会下载不同类型的播放音乐的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: '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)

  },

  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了,一个小程序就可以实现相应的功能,而且还不占内存,即用即关。怎么样,是不是觉得很方便呢?想要尝试一下的话,大家可以对照上述流程进行开发哦。更多相关资料请在微信小程序商店搜索。

  


地址 · ADDRESS

地址:建邺区新城科技园嘉陵江东街18号2层

邮箱:309474043@qq.Com

点击查看更多案例

联系 · CALL TEL

400-8793-956

售后专线:025-65016872

业务QQ:309474043    售后QQ:1850555641

©南京安优网络科技有限公司 版权所有   苏ICP备12071769号-4  网站地图