【移动应用开发技术】如何使用微信小程序开发简易的播放器

【移动应用开发技术】如何使用微信小程序开发简易的播放器

这篇文章给大家分享的是有关如何使用微信小程序开发简易的播放器的内容。在下觉得挺实用的，因此分享给大家做个参考，一起跟随在下过来看看吧。使用微信小程序开发简易的播放器本文根据别人例子跟着做一个音乐播放器小程序，留下一个脚印吧。实现以下微信小程序的音乐播放器。界面做的确实挺丑的，先上wxss文件//index.wxss

.button-style{

background-color:

#eee;

border-radius:

8rpx;

margin:

20rpx;

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

<button

type="primary">播放</button>

<button

type="primary"暂停</button>

<button

type="primary"设置播放进</button>

<button

type="primary"停止播放</button>

<button

type="primary"获取播放状</button>没办法，用开发者工具打出来就是这样的丑格式下面是重点index.js//index.js

//获取应用实例

var

app

=

getApp()

Page({

data:{

},

//播放

listenerButtonPlay:function(){

wx.playBackgroundAudio({

dataUrl:

'/e54ad7f0a834b9c07ec6.mp3',

title:'李宗盛',

//图片地址地址

coverImgUrl:'/63bedb5f584234b6827c.jpg'

})

},

//监听button暂停按钮

listenerButtonPause:function(){

wx.pauseBackgroundAudio({

});

console.log('暂停播放')

},

/**

*

播放状态

*/

listenerButtonGetPlayState:function(){

wx.getBackgroundAudioPlayerState({

success:

function(res){

//

success

//duration

选定音频的长度（单位：s），只有在当前有音乐播放时返回

console.log('duration:'

+

res.duration)

console.log('currentPosition:'

+

res.currentPosition)

//status

播放状态（2：没有音乐在播放，1：播放中，0：暂停中）

console.log('status:'

+

res.status)

console.log('downloadPercent:'

+

res.downloadPercent)

//dataUrl

歌曲数据链接，只有在当前有音乐播放时返回

console.log('dataUrl:'

+

res.dataUrl)

},

fail:

function()

{

//

fail

},

complete:

function()

{

//

complete

}

})

},

/**

*

设置进度

*/

listenerButtonSeek:function(){

wx.seekBackgroundAudio({

position:

40

})

},

/**

*

停止播放

*/

listenerButtonStop:function(){

wx.stopBackgroundAudio({

})

console.log('停止播放')

},

onLoad:function(options){

//

页面初始化

options为页面跳转所带来的参数

/**

*

监听音乐播放

*/

wx.onBackgroundAudioPlay(function()

{

//

callback

console.log('onBackgroundAudioPlay')

})

/**

*

监听音乐暂停

*/

wx.onBackgroundAudioPause(function()

{

//

callback

console.log('onBackgroundAudioPause')

})

/**

*

监听音乐停止

*/

wx.onBackgroundAudioStop(function()

{

//

callback

console.log('onBackgroundAudioStop')

})

}

})里面可以先按照顺序来看onLoad函数，里面