如何开发一个音乐播放器小程序?下面本篇文章给大家介绍一下。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。
本文根据别人例子跟着做一个音乐播放器小程序,留下一个脚印吧。实现以下微信小程序的音乐播放器。
界面做的确实挺丑的,先上wxss文件
//index.wxss .button-style{ background-color: #eee; border-radius: 8rpx; margin: 20rpx; }
只是顶一个简单的按钮的圆角和间距,颜色这个我还是用primary这个小绿色。
下面是index.wxml文件
//index.wxml播放暂停设置播放进停止播放获取播放状没办法,用开发者工具打出来就是这样的丑格式
下面是重点index.js
//index.js //获取应用实例 var app = getApp() Page({ data:{ listenerButtonPlay:function(){ wx.playBackgroundAudio({ dataUrl: \ #39;http://ac-5g9r20ds.clouddn.com/e54ad7f0a834b9c07ec6.mp3\ #39;, title:\ #39;李宗盛\ #39;, //图片地址地址 coverImgUrl:\ #39;http://ac-5g9r20ds.clouddn.com/63bedb5f584234b6827c.jpg\ #39; //监听button暂停按钮 listenerButtonPause:function(){ wx.pauseBackgroundAudio({ console.log(\ #39;暂停播放\ #39;) * 播放状态 listenerButtonGetPlayState:function(){ wx.getBackgroundAudioPlayerState({ success: function(res){ // success //duration 选定音频的长度(单位:s),只有在当前有音乐播放时返回 console.log(\ #39;duration:\ #39; + res.duration) console.log(\ #39;currentPosition:\ #39; + res.currentPosition) //status 播放状态(2:没有音乐在播放,1:播放中,0:暂停中) console.log(\ #39;status:\ #39; + res.status) console.log(\ #39;downloadPercent:\ #39; + res.downloadPercent) //dataUrl 歌曲数据链接,只有在当前有音乐播放时返回 console.log(\ #39;dataUrl:\ #39; + res.dataUrl) fail: function() { // fail complete: function() { // complete * 设置进度 listenerButtonSeek:function(){ wx.seekBackgroundAudio({ position: 40 * 停止播放 listenerButtonStop:function(){ wx.stopBackgroundAudio({ console.log(\ #39;停止播放\ #39;) onLoad:function(options){ // 页面初始化 options为页面跳转所带来的参数 /** * 监听音乐播放 wx.onBackgroundAudioPlay(function() { // callback console.log(\ #39;onBackgroundAudioPlay\ #39;) * 监听音乐暂停 wx.onBackgroundAudioPause(function() { // callback console.log(\ #39;onBackgroundAudioPause\ #39;) * 监听音乐停止 wx.onBackgroundAudioStop(function() { // callback console.log(\ #39;onBackgroundAudioStop\ #39;) })
里面可以先按照顺序来看onLoad函数,里面定义了三个监听函数,可以看到console里面效果如图
推荐:《小程序开发教程》
以上就是如何开发一个音乐播放器小程序?的详细内容,更多请关注php中文网其它相关文章!
PotPlayer播放器
potplayer是一款功能全面的视频播放器,支持各种格式的音频文件,内置了非常强大的解码器功能,能够非常流畅的观看,有需要的小伙伴快来保存下载体验吧!