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


Posted in Javascript onNovember 20, 2019

今天继续玩小程序的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({

 });
 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函数,里面定义了三个监听函数,可以看到console里面效果如图

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

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

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript 一段左右两边随屏滚动的代码
Jun 18 Javascript
javascript实现的使用方向键控制光标在table单元格中切换
Nov 17 Javascript
将list转换为json失败的原因
Dec 17 Javascript
使用Sticker.js实现贴纸效果
Jan 28 Javascript
基于Node.js的强大爬虫 能直接发布抓取的文章哦
Jan 10 Javascript
精通JavaScript的this关键字
May 28 Javascript
js事件驱动机制 浏览器兼容处理方法
Jul 23 Javascript
Element UI 自定义正则表达式验证方法
Sep 04 Javascript
微信小程序日历/日期选择插件使用方法详解
Dec 28 Javascript
如何将百度地图包装成Vue的组件的方法步骤
Feb 12 Javascript
Vue组件为什么data必须是一个函数
Jun 11 Javascript
vue+swiper实现左右滑动的测试题功能
Oct 30 Javascript
vue移动端模态框(可传参)的实现
Nov 20 #Javascript
微信小程序实现上拉加载功能
Nov 20 #Javascript
微信小程序实现锚点功能
Nov 20 #Javascript
vue实现element表格里表头信息提示功能(推荐)
Nov 20 #Javascript
微信小程序实现时间进度条功能
Nov 17 #Javascript
小程序实现投票进度条
Nov 20 #Javascript
javascript跳转与返回和刷新页面的实例代码
Nov 20 #Javascript
You might like
PHP开发过程中常用函数收藏
2009/12/14 PHP
php实现用户注册密码的crypt加密
2017/06/08 PHP
推荐:极酷右键菜单
2006/11/29 Javascript
基于jQuery的实现简单的分页控件
2010/10/10 Javascript
Javascript在IE下设置innerHTML时出现未知的运行时错误的解决方法
2011/01/12 Javascript
ASP.NET jQuery 实例6 (实现CheckBoxList成员全选或全取消)
2012/01/13 Javascript
JQuery验证jsp页面属性是否为空(实例代码)
2013/11/08 Javascript
JavaScript实现的日期控件具体代码
2013/11/18 Javascript
js隐式全局变量造成的bug示例代码
2014/04/22 Javascript
javascript中的遍历for in 以及with的用法
2014/12/22 Javascript
jQuery对象初始化的传参方式
2015/02/26 Javascript
关于Javascript中defer和async的区别总结
2016/09/20 Javascript
详解vue事件对象、冒泡、阻止默认行为
2017/03/20 Javascript
nodejs集成sqlite使用示例
2017/06/05 NodeJs
Vue请求JSON Server服务器数据的实现方法
2018/11/02 Javascript
jQuery的ztree仿windows文件新建和拖拽功能的实现代码
2018/12/05 jQuery
浅谈Vue.js 关于页面加载完成后执行一个方法的问题
2019/04/01 Javascript
一篇文章弄懂javascript中的执行栈与执行上下文
2019/08/09 Javascript
vue vant Area组件使用详解
2019/12/09 Javascript
[02:49:21]2019完美盛典全程录像
2019/12/08 DOTA
Python的词法分析与语法分析
2013/05/18 Python
详解Python sys.argv使用方法
2019/05/10 Python
Python 格式化打印json数据方法(展开状态)
2020/02/27 Python
Django正则URL匹配实现流程解析
2020/11/13 Python
HTML5 背景的显示区域实现
2020/07/09 HTML / CSS
小狗电器官方商城:中国高端吸尘器品牌
2017/03/29 全球购物
美国家居装饰网上商店:Lulu & Georgia
2019/09/14 全球购物
浪费资源的建议书
2014/03/12 职场文书
《鲁班和橹板》教学反思
2014/04/27 职场文书
装修活动策划方案
2014/08/27 职场文书
教导主任个人总结
2015/03/03 职场文书
看古人们是如何赞美老师的?
2019/07/08 职场文书
pytorch加载预训练模型与自己模型不匹配的解决方案
2021/05/13 Python
Nginx反向代理学习实例教程
2021/10/24 Servers
python实现层次聚类的方法
2021/11/01 Python
MySQL主从切换的超详细步骤
2022/06/28 MySQL