微信小程序学习-最简易的音乐播放器

今天继续玩小程序的api，看着别人例子跟着做一个小程序，留下一个脚印吧。末尾附上github源码地址。实现以下微信小程序的音乐播放器，先看下效果图 

界面做的确实挺丑的，先上wxss文件

1. //index.wxss
2. .button-style{
3. background-color: #eee;
4. border-radius: 8rpx;
5. margin: 20rpx;
6. }

只是顶一个简单的按钮的圆角和间距，颜色这个我还是用primary这个小绿色。  下面是index.wxml文件

1. //index.wxml
2. <button class="button-style" type="primary" bindtap="listenerButtonPlay">播放</button>
3. <button class="button-style" type="primary" bindtap="listenerButtonPause">暂停</button>
4. <button class="button-style" type="primary" bindtap="listenerButtonSeek">设置播放进度</button>
5. <button class="button-style" type="primary" bindtap="listenerButtonStop">停止播放</button>
6. <button class="button-style" type="primary" bindtap="listenerButtonGetPlayState">获取播放状态</button>

没办法，用开发者工具打出来就是这样的丑格式

下面是重点index.js

1. //index.js
2. //获取应用实例
3. var app = getApp()
4. Page({
5. data:{
6.  
7. },
8. //播放
9. listenerButtonPlay:function(){
10. wx.playBackgroundAudio({
11. dataUrl: 'https://ac-5g9r20ds.clouddn.com/e54ad7f0a834b9c07ec6.mp3',
12. title:'李宗盛',
13. //图片地址地址
14. coverImgUrl:'https://ac-5g9r20ds.clouddn.com/63bedb5f584234b6827c.jpg'
15. })
16. },
17. //监听button暂停按钮
18. listenerButtonPause:function(){
19. wx.pauseBackgroundAudio({
20.  
21. });
22. console.log('暂停播放')
23. },
24. /**
25. * 播放状态
26. */
27. listenerButtonGetPlayState:function(){
28. wx.getBackgroundAudioPlayerState({
29. success: function(res){
30. // success
31. //duration 选定音频的长度（单位：s），只有在当前有音乐播放时返回
32. console.log('duration:' + res.duration)
33. console.log('currentPosition:' + res.currentPosition)
34. //status 播放状态（2：没有音乐在播放，1：播放中，0：暂停中）
35. console.log('status:' + res.status)
36. console.log('downloadPercent:' + res.downloadPercent)
37. //dataUrl 歌曲数据链接，只有在当前有音乐播放时返回
38. console.log('dataUrl:' + res.dataUrl)
39. },
40. fail: function() {
41. // fail
42. },
43. complete: function() {
44. // complete
45. }
46. })
47. },
48. /**
49. * 设置进度
50. */
51. listenerButtonSeek:function(){
52. wx.seekBackgroundAudio({
53. position: 40
54. })
55. },
56. /**
57. * 停止播放
58. */
59. listenerButtonStop:function(){
60. wx.stopBackgroundAudio({
61.  
62. })
63. console.log('停止播放')
64. },
65. onLoad:function(options){
66. // 页面初始化 options为页面跳转所带来的参数
67. /**
68. * 监听音乐播放
69. */
70. wx.onBackgroundAudioPlay(function() {
71. // callback
72. console.log('onBackgroundAudioPlay')
73. })
74. /**
75. * 监听音乐暂停
76. */
77. wx.onBackgroundAudioPause(function() {
78. // callback
79. console.log('onBackgroundAudioPause')
80. })
81. /**
82. * 监听音乐停止
83. */
84. wx.onBackgroundAudioStop(function() {
85. // callback
86. console.log('onBackgroundAudioStop')
87. })
88. }
89. })

里面可以先按照顺序来看onLoad函数，里面定义了三个监听函数，可以看到console里面效果如图 

其实里面的api使用不是很难，在button标签里面写好bindtap事件名，在js方法中对应相应的处理function，像wx.playBackgroundAudio这个只需要你去填充一些参数即可，不懂得可以参考api文档（API入口）。