今日我继续探索小程序的API，模仿他人的案例动手制作了一个小程序，留下自己的足迹。最后附上源码的链接。接下来，我将展示一个微信小程序的音乐播放器，请大家先看看它的效果图。
界面做的确实挺丑的，先上wxss文件
[id_402091443]{
background-color: #eee;
border-radius: 8rpx;
margin: 20rpx;
}
仅仅是对那个按钮的边缘和间隔进行了轻微的调整，至于颜色，我依旧选择了这个浅绿色。
下面是.wxml文件
class="button-style" type="primary" bindtap="listenerButtonPlay">播放
class="button-style" type="primary" bindtap="listenerButtonPause">暂停
class="button-style" type="primary" bindtap="listenerButtonSeek">设置播放进度
class="button-style" type="primary" bindtap="listenerButtonStop">停止播放
class="button-style" type="primary" bindtap="listenerButtonGetPlayState">获取播放状态
没办法，用开发者工具打出来就是这样的丑格式
下面是重点.js
var app = getApp()
Page({
data:{
},
listenerButtonPlay:
function(){
wx.playBackgroundAudio({
dataUrl:
该链接指向的音频文件为：http://ac-5g9r20ds.clouddn.com/e54ad7f0a834b9c07ec6.mp3。,
title:
'李宗盛',
coverImgUrl:
该图片的链接为：http://ac-5g9r20ds.clouddn.com/63bedb5f584234b6827c.jpg，请点击访问。
})
},
listenerButtonPause:
function(){
wx.pauseBackgroundAudio({
});
console.log(
'暂停播放')
},
listenerButtonGetPlayState:
function(){
调用wx.getBackgroundAudioPlayerState()函数，以获取背景音频播放器的状态信息。
success:
function(res){
console.log(
'duration:' + res.duration)
console.log(
'currentPosition:' + res.currentPosition)
console.log(
'status:' + res.status)
console.log(
'downloadPercent:' + res.downloadPercent)
console.log(
'dataUrl:' + res.dataUrl)
},
fail:
function() {
},
complete:
function() {
}
})
},
listenerButtonSeek:
function(){
wx.seekBackgroundAudio({
position:
40
})
},
listenerButtonStop:
function(){
wx.stopBackgroundAudio({
})
console.log(
'停止播放')
},
onLoad:
function(options){
wx.onBackgroundAudioPlay(
function() {
console.log(
当背景音频开始播放时)
})
wx.onBackgroundAudioPause(
function() {
console.log(
当背景音频暂停时)
})
wx.onBackgroundAudioStop(
function() {
console.log(
当背景音频停止播放时)
})
}
})
在文档中，您可以依次查看函数定义，其中包含了三个监听函数，具体效果可参照附图所示。
实际上，使用其中的API并不复杂；只需在标签中正确标注事件名称，然后在方法中找到对应的处理逻辑；对于像wx.这样的API，你只需填充必要的参数；若遇到不懂之处，可以查阅API文档（API入口）。