微信小程序实现音乐播放器

网友投稿 308 2023-11-13

今天继续玩小程序的api，看着别人例子跟着做一个小程序，留下一个脚印吧。末尾附上github源码地址。实现以下微信小程序的音乐播放器，先看下效果图

微信小程序实现音乐播放器

界面做的确实挺丑的，先上wxss文件

?
1
2
3
4
5
6
//index.wxss
.button-style{
background-color: #eee;
border-radius: 8rpx;
margin: 20rpx;
}

只是顶一个简单的按钮的圆角和间距，颜色这个我还是用primary这个小绿色。

下面是index.wxml文件
?
1
2
3
4
5
6
//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

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

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

附上github源码地址

为大家推荐现在关注度比较高的微信小程序教程一篇：《微信小程序开发教程》小编为大家精心整理的，希望喜欢。

您可能感兴趣的文章:微信小程序开发之视频播放器 Video 弹幕 弹幕颜色自定义实例

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。

标签：程序 微信小程序 小程序 实例
上一篇:通过移动数字营销平台提升你的业务
下一篇:2023年母婴APP市场分析
相关文章

 发表评论

暂时没有评论，来抢沙发吧~