微信小程序：实现音乐播放器的功能

有盐、在见2024-06-12 20:54

在编写微信小程序时，也许会用到播放背景音乐的功能，那么如果是自动播放背景音乐，可以在加载页面时就运行播放音乐的函数，若是希望简单实现音乐播放器的功能，那么设计几个按钮，并且设计按钮点击的事件。

接下来我说明按钮实现音乐播放的功能。wxss文件就不讲了，如果需要设置按钮格式，可以定义按钮的类名，在wxss中编写想要的按钮样式。

首先就需要有音乐的API接口，如果没有source，那么就无从谈起使用，可以参考我的API接口文章，里面整理了一些免费API接口，适合新手用。

然后就是在wxml文件中定义button组件，比如下面这个按钮实现""播放""的功能。

复制代码

<button class="button-style1" bindtap="audioPlay">播放</button>

在.js文件中编写相应的点击按钮事件

复制代码

  data: {
     audioContext: null
  },
wx.request(
    {
      url:'换成自己的音乐API接口',
  method:'GET',
  success:(ret)=>{
    console.log(ret.data.data)#这里相应的也要改
    this.setData(
      {
        audio:ret.data.data#这里相应的也要改
      }
    )
  }
})
},
audioPlay: function () {  
  this.data.audioContext.src = this.data.audio.Music,
  this.data.audioContext.play()  
},

当然有播放就有其他的功能实现，以下有暂停，挑选某一秒播放等。

如： this.data.audioContext.pause() ， this.data.audioContext.seek(0) 只需要把 this.data.audioContext.play() 替换成以上的函数就行。

接下来最后一步就是页面加载：

复制代码

onLoad(options) {
   this.setData
    ({
    audioContext: wx.createInnerAudioContext() 
    })
  },

至此，可以简单实现音乐播放器功能