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

最新推荐文章于 2024-08-07 11:03:06 发布

eiiu

最新推荐文章于 2024-08-07 11:03:06 发布

阅读量3.1k

点赞数

分类专栏：小程序

本文链接：https://blog.csdn.net/watt1208/article/details/88696202

版权

小程序专栏收录该内容

1 篇文章 0 订阅

订阅专栏

一.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源码如下

// pages/demo05/audio/audio.js
Page({

  /**
   * 页面的初始数据
   */
  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 (options) {
    this.audioCtx.play()
  }, 
  audioPause: function (options) {
    this.audioCtx.pause()
  },
  audioSeek0: function (options) {
    this.audioCtx.seek(0)
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
  
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
    this.audioCtx = wx.createAudioContext('myAudio')
    //this.audioCtx.play()
  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
  
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {
  
  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {
  
  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {
  
  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
  
  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {
  
  }
})

三、替换音乐

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

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

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

四、完成效果

修改处的代码：

 data: {
    poster: 'https://y.gtimg.cn/music/photo_new/T002R300x300M000002TIKe54E37Ky.jpg?max_age=2592000',
    name: '樱花树下',
    author: '张敬轩',
    src: 'http://110.53.180.27/amobile.music.tc.qq.com/C400000Mu2GQ4KUFrC.m4a?guid=3901453618&amp;vkey=FE7123F8927EED177220D435E727E371E5DF98A0C7D42F86B0CD99713EBE4958362A650EFF814AEB19ABAB8D78892D1CE1C9EF012FEF10A0&amp;uin=0&amp;fromtag=66'
  }