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


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 相关文章推荐
基于js disabled=&quot;false&quot;不起作用的解决办法
Jun 26 Javascript
Textarea根据内容自适应高度
Oct 28 Javascript
JavaScript中操作字符串之localeCompare()方法的使用
Jun 06 Javascript
Js查找字符串中出现次数最多的字符及个数实例解析
Sep 05 Javascript
Angularjs 创建可复用组件实例代码
Oct 09 Javascript
javascript实现多张图片左右无缝滚动效果
Mar 22 Javascript
vue2.0多条件搜索组件使用详解
Mar 26 Javascript
Vue全家桶实践项目总结(推荐)
Nov 04 Javascript
Webpack 4.x搭建react开发环境的方法步骤
Aug 15 Javascript
vue项目设置scrollTop不起作用(总结)
Dec 21 Javascript
解决vue 子组件修改父组件传来的props值报错问题
Nov 09 Javascript
JS实现多选框的操作
Jun 24 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
自制短波长线天线频率预选器 - 成功消除B2K之流的镜像
2021/03/02 无线电
简单示例AJAX结合PHP代码实现登录效果代码
2008/07/25 PHP
linux php mysql数据库备份实现代码
2009/03/10 PHP
php目录操作函数之获取目录与文件的类型
2010/12/29 PHP
php数组函数序列之array_combine() - 数组合并函数使用说明
2011/10/29 PHP
利用PHP扩展vld查看PHP opcode操作步骤
2013/03/04 PHP
PHP网络操作函数汇总
2015/05/18 PHP
JQuery的ajax获取数据后的处理总结(html,xml,json)
2010/07/14 Javascript
javascript轻量级模板引擎juicer使用指南
2014/06/22 Javascript
JavaScript控制图片加载完成后调用回调函数的方法
2015/03/20 Javascript
JavaScript中利用jQuery绑定事件的几种方式小结
2016/03/06 Javascript
jQuery弹出下拉列表插件(实现kindeditor的@功能)
2016/08/16 Javascript
node.js + socket.io 实现点对点随机匹配聊天
2017/06/30 Javascript
AugularJS从入门到实践(必看篇)
2017/07/10 Javascript
30分钟快速入门掌握ES6/ES2015的核心内容(上)
2018/04/18 Javascript
使用D3.js构建实时图形的示例代码
2018/08/28 Javascript
详解几十行代码实现一个vue的状态管理
2019/01/28 Javascript
JS实现点星星消除小游戏
2020/03/24 Javascript
[55:32]2018DOTA2亚洲邀请赛 4.4 淘汰赛 EG vs LGD 第二场
2018/04/05 DOTA
python实现bitmap数据结构详解
2014/02/17 Python
python中多层嵌套列表的拆分方法
2018/07/02 Python
python实现RabbitMQ的消息队列的示例代码
2018/11/08 Python
python是否适合网页编程详解
2019/10/04 Python
详解opencv中画圆circle函数和椭圆ellipse函数
2019/12/27 Python
numpy的Fancy Indexing和array比较详解
2020/06/11 Python
windows10在visual studio2019下配置使用openCV4.3.0
2020/07/14 Python
CSS3教程(9):设置RGB颜色
2009/04/02 HTML / CSS
Bootstrap File Input文件上传组件
2020/12/01 HTML / CSS
美国最古老的精致书写工具制造商:A.T. Cross(高仕)
2018/01/30 全球购物
煤矿班组长的职责
2013/12/25 职场文书
乡镇三项教育实施方案
2014/03/30 职场文书
艺术设计专业求职自荐信
2014/05/19 职场文书
销售团队激励口号
2014/06/06 职场文书
2015年元旦联欢晚会活动总结
2014/11/28 职场文书
goland 恢复已更改文件的操作
2021/04/28 Golang
解决mysql:ERROR 1045 (28000): Access denied for user 'root'@'localhost' (using password: NO/YES)
2021/06/26 MySQL