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


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 相关文章推荐
JQUERY获取form表单值的代码
Jul 17 Javascript
js文件Cookie存取值示例代码
Feb 20 Javascript
js检测网络是否具体连接功能的代码
May 23 Javascript
jquery实现可拖拽弹出层特效
Jan 04 Javascript
jQuery实现鼠标滑向当前图片高亮显示并且其它图片变灰的方法
Jul 27 Javascript
jquery横向纵向鼠标滚轮全屏切换
Feb 27 Javascript
angular学习之从零搭建一个angular4.0项目
Jul 10 Javascript
解决angularjs前后端分离调用接口传递中文时中文乱码的问题
Aug 13 Javascript
基于vue2.0的活动倒计时组件countdown(附源码下载)
Oct 09 Javascript
使用p5.js临摹动态图形
Oct 23 Javascript
vue和H5 draggable实现拖拽并替换效果
Jul 29 Javascript
vue项目打包后请求地址错误/打包后跨域操作
Nov 04 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实现屏蔽掉黑帽SEO的搜索关键字
2015/04/15 PHP
php获取linux命令结果的实例
2017/03/13 PHP
javascript cookie解码函数(兼容ff)
2008/03/17 Javascript
JScript 脚本实现文件下载 一般用于下载木马
2009/10/29 Javascript
Javascript 判断客户端浏览器类型代码
2010/03/01 Javascript
js常用代码段整理
2011/11/30 Javascript
jquery无缝向上滚动实现代码
2013/03/29 Javascript
js单向链表的具体实现实例
2013/06/21 Javascript
js获取客户端外网ip的简单实例
2013/11/21 Javascript
jQuery针对各类元素操作基础教程
2014/08/29 Javascript
Nodejs Post请求报socket hang up错误的解决办法
2014/09/25 NodeJs
JavaScript 动态加载脚本和样式的方法
2015/04/13 Javascript
js+css实现文字散开重组动画特效代码分享
2015/08/21 Javascript
浅析BootStrap栅格系统
2016/06/07 Javascript
AngularJS延迟加载html template
2016/07/27 Javascript
JS 根据子网掩码,网关计算出所有IP地址范围示例
2020/04/23 Javascript
Centos7 中 Node.js安装简单方法
2016/11/02 Javascript
如何提高数据访问速度
2016/12/26 Javascript
JS数组操作之增删改查的简单实现
2017/08/21 Javascript
实现div滚动条默认最底部以及默认最右边的示例代码
2017/11/15 Javascript
vue从零实现一个消息通知组件的方法详解
2020/03/16 Javascript
[03:03]DOTA2校园争霸赛 济南城市决赛欢乐发奖活动
2013/10/21 DOTA
[01:26]DOTA2荣耀之路2:iG,China
2018/05/24 DOTA
[00:16]热血竞技场
2019/03/06 DOTA
由面试题加深对Django的认识理解
2019/07/19 Python
Python3.8安装Pygame教程步骤详解
2020/08/14 Python
俄罗斯街头服装品牌:Black Star Wear
2017/03/01 全球购物
Java基础知识面试要点
2016/07/29 面试题
入党积极分子介绍信
2014/01/17 职场文书
美容院考勤制度
2014/01/30 职场文书
大班亲子运动会方案
2014/06/10 职场文书
总经理岗位职责范本
2015/04/01 职场文书
公司人事任命通知
2015/04/20 职场文书
2015年“我们的节日·中秋节”活动总结
2015/07/30 职场文书
2016年教师党员创先争优承诺书
2016/03/24 职场文书
 Python 中 logging 模块使用详情
2022/03/03 Python