用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

微客吧 首页 教程 微信小程序 新手教程 查看内容

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

纸飞机 2018-3-8 09:36

今天继续玩的api,看着别人例子跟着做一个小程序,留下一个脚印吧。末尾附上github源码地址。实现以下微信小程序的音乐播放器,先看下效果图 界面做的确实挺丑的,先上wxss文件//index.wxss.button-style{ back ...

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

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

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

https://github.com/shouldnotappearcalm/weixinminiprogram-musicplayer

鲜花
鲜花
握手
握手
雷人
雷人
路过
路过
鸡蛋
鸡蛋
分享至 : QQ空间
收藏