devbox
weixin_40725706
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

微信小程序-audio组件-替换自己喜欢的音乐_acestudio替换音色

作者：weixin_40725706 | 2024-02-18 00:59:59

赞

踩

acestudio替换音色

一.audio组件属性

属性名

类型

默认值

说明

id

String

　

audio 组件的唯一标识符

src

String

　

要播放音频的资源地址

loop

Boolean

FALSE

是否循环播放

controls

Boolean

FALSE

是否显示默认控件

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 事件

其中binderror 属性触发后的返回值MediaError.code共有4种取值，描述如下：

1：获取资源被用户禁止；

2：网络错误；

3：解码错误；

4：不合适资源。

 

二.audio组件的案例audio.js源码如下

  1. // pages/demo05/audio/audio.js
  2. Page({
  3.  
  4.   /**
  5.    * 页面的初始数据
  6.    */
  7.   data: {
  8.     poster: 'http://y.gtimg.cn/music/photo_new/T002R300x300M000003rsKF44GyaSk.jpg?max_age=2592000',
  9.     name: '此时此刻',
  10.     author: '许巍',
  11.     src: 'http://ws.stream.qqmusic.qq.com/M500001VfvsJ21xFqb.mp3?guid=ffffffff82def4af4b12b3cd9337d5e7&uin=346897220&vkey=6292F51E1E384E06DCBDC9AB7C49FD713D632D313AC4858BACB8DDD29067D3C601481D36E62053BF8DFEAF74C0A5CCFADD6471160CAF3E6A&fromtag=46'
  12.   },
  13.   audioPlay: function (options) {
  14.     this.audioCtx.play()
  15.   }, 
  16.   audioPause: function (options) {
  17.     this.audioCtx.pause()
  18.   },
  19.   audioSeek0: function (options) {
  20.     this.audioCtx.seek(0)
  21.   },
  22.   /**
  23.    * 生命周期函数--监听页面加载
  24.    */
  25.   onLoad: function (options) {
  26.   
  27.   },
  28.  
  29.   /**
  30.    * 生命周期函数--监听页面初次渲染完成
  31.    */
  32.   onReady: function () {
  33.     this.audioCtx = wx.createAudioContext('myAudio')
  34.     //this.audioCtx.play()
  35.   },
  36.  
  37.   /**
  38.    * 生命周期函数--监听页面显示
  39.    */
  40.   onShow: function () {
  41.   
  42.   },
  43.  
  44.   /**
  45.    * 生命周期函数--监听页面隐藏
  46.    */
  47.   onHide: function () {
  48.   
  49.   },
  50.  
  51.   /**
  52.    * 生命周期函数--监听页面卸载
  53.    */
  54.   onUnload: function () {
  55.   
  56.   },
  57.  
  58.   /**
  59.    * 页面相关事件处理函数--监听用户下拉动作
  60.    */
  61.   onPullDownRefresh: function () {
  62.   
  63.   },
  64.  
  65.   /**
  66.    * 页面上拉触底事件的处理函数
  67.    */
  68.   onReachBottom: function () {
  69.   
  70.   },
  71.  
  72.   /**
  73.    * 用户点击右上角分享
  74.    */
  75.   onShareAppMessage: function () {
  76.   
  77.   }
  78. })

 

 

三、替换音乐

1.替换音乐我们需要更改src、poster、name、auther这几个属性。

2.音频资源可以在网页播放器中获得。如我在qq音乐的网页版中找到一首喜欢的歌曲并播放，然后打开审查元素，找到歌曲的src，复制该audio的src到微信小程序中进行替换。

 

 

3.专辑封面也是同样的在网页中打开审查元素，找到该图像并复制src到微信小程序中进行替换。

四、完成效果

修改处的代码：

  1.  data: {
  2.     poster: 'https://y.gtimg.cn/music/photo_new/T002R300x300M000002TIKe54E37Ky.jpg?max_age=2592000',
  3.     name: '樱花树下',
  4.     author: '张敬轩',
  5.     src: 'http://110.53.180.27/amobile.music.tc.qq.com/C400000Mu2GQ4KUFrC.m4a?guid=3901453618&vkey=FE7123F8927EED177220D435E727E371E5DF98A0C7D42F86B0CD99713EBE4958362A650EFF814AEB19ABAB8D78892D1CE1C9EF012FEF10A0&uin=0&fromtag=66'
  6.   }
声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：【wpsshop博客】
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号