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

在编写微信小程序时，大概会用到播放配景音乐的功能，那么假如是主动播放配景音乐，可以在加载页面时就运行播放音乐的函数，若是希望简单实现音乐播放器的功能，那么计划几个按钮，而且计划按钮点击的事件。
接下来我阐明按钮实现音乐播放的功能。wxss文件就不讲了，假如需要设置按钮格式，可以定义按钮的类名，在wxss中编写想要的按钮样式。
起首就需要有音乐的API接口，假如没有source，那么就无从谈起使用，可以参考我的API接口文章，里面整理了一些免费API接口，得当新手用。
然后就是在wxml文件中定义button组件，好比下面这个按钮实现“”播放“”的功能。

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

复制代码

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

1.   data: {
2.      audioContext: null
3.   },
4. wx.request(
5.     {
6.       url:'换成自己的音乐API接口',
7.   method:'GET',
8.   success:(ret)=>{
9.     console.log(ret.data.data)#这里相应的也要改
10.     this.setData(
11.       {
12.         audio:ret.data.data#这里相应的也要改
13.       }
14.     )
15.   }
16. })
17. },
18. audioPlay: function () {  
19.   this.data.audioContext.src = this.data.audio.Music,
20.   this.data.audioContext.play()  
21. },  

复制代码

固然有播放就有其他的功能实现，以下有停息，挑选某一秒播放等。
如： this.data.audioContext.pause() ， this.data.audioContext.seek(0) 只需要把 this.data.audioContext.play()  替换成以上的函数就行。
接下来最后一步就是页面加载：

1. onLoad(options) {
2.    this.setData
3.     ({
4.     audioContext: wx.createInnerAudioContext()
5.     })
6.   },

复制代码

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

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。