微信小程序实现音乐播放器
5星 · 超过95%的资源 36 浏览量
2021-01-03
09:51:31
上传
评论 1
收藏 126KB PDF 举报 
微信小程序实现音乐播放器微信小程序实现音乐播放器
今天继续玩小程序的api，看着别人例子跟着做一个小程序，留下一个脚印吧。末尾附上github源码地址。实现以下微信小程序的音乐播
放器，先看下效果图
界面做的确实挺丑的，先上wxss文件
//index.wxss
.button-style{
background-color: #eee;
border-radius: 8rpx;
margin: 20rpx;
}
只是顶一个简单的按钮的圆角和间距，颜色这个我还是用primary这个小绿色。
下面是index.wxml文件
//index.wxml
<button class="button-style" type="primary" bindtap="listenerButtonPlay">播放</button>
<button class="button-style" type="primary" bindtap="listenerButtonPause">暂停</button>
<button class="button-style" type="primary" bindtap="listenerButtonSeek">设置播放进度</button>
<button class="button-style" type="primary" bindtap="listenerButtonStop">停止播放</button>
<button class="button-style" type="primary" bindtap="listenerButtonGetPlayState">获取播放状态</button>
没办法，用开发者工具打出来就是这样的丑格式
下面是重点index.js
//index.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'
})
},
//监听button暂停按钮
listenerButtonPause:function(){
wx.pauseBackgroundAudio({
评论5
最新资源