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


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 相关文章推荐
屏蔽鼠标右键、Ctrl+n、shift+F10、F5刷新、退格键 的javascript代码
Apr 01 Javascript
js给onclick事件赋值,动态传参数实例解说
Mar 28 Javascript
15条JavaScript最佳实践小结
Aug 09 Javascript
使用AngularJS 应用访问 Android 手机的图片库
Mar 24 Javascript
JSON与XML优缺点对比分析
Jul 17 Javascript
jQuery实现的淡入淡出二级菜单效果代码
Sep 15 Javascript
node.js从数据库获取数据
May 08 Javascript
详解Angular 开发环境搭建
Jun 22 Javascript
vue2.0 如何把子组件的数据传给父组件(推荐)
Jan 15 Javascript
JavaScript实现简单的隐藏式侧边栏功能示例
Aug 31 Javascript
JavaScript遍历数组的三种方法map、forEach与filter实例详解
Feb 27 Javascript
WebStorm中如何将自己的代码上传到github示例详解
Oct 28 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跨站攻击实例分析
2014/10/28 PHP
php中将一个对象保存到Session中的方法
2015/03/13 PHP
标准版Eclipse搭建PHP环境的详细步骤
2015/11/18 PHP
PhpStorm2020 + phpstudyV8 +XDebug的教程详解
2020/09/17 PHP
Prototype使用指南之range.js
2007/01/10 Javascript
运用jquery实现table单双行不同显示并能单行选中
2009/07/25 Javascript
jQuery AJAX 调用WebService实现代码
2010/03/24 Javascript
avascript中的自执行匿名函数应用示例
2014/09/15 Javascript
PHP中CURL的几个经典应用实例
2015/01/23 Javascript
jQuery Ajax中的事件详细介绍
2015/04/16 Javascript
javascript实现将文件保存到本地方法汇总
2015/07/26 Javascript
JavaScript实现的经典文件树菜单效果
2015/09/08 Javascript
BootStrap3学习笔记(一)之网格系统
2016/05/20 Javascript
jQuery纵向导航菜单效果实现方法
2016/12/19 Javascript
AngularJS中$http使用的简单介绍
2017/03/17 Javascript
AngularJS实用基础知识_入门必备篇(推荐)
2017/07/10 Javascript
jQuery实现定时隐藏对话框的方法分析
2018/02/12 jQuery
详解Vue项目引入CreateJS的方法(亲测可用)
2019/05/30 Javascript
详解在vue-cli3.0中自定css、js和图片的打包路径
2019/08/26 Javascript
layui 实现二级弹窗弹出之后 关闭一级弹窗的方法
2019/09/18 Javascript
H5实现手机拍照和选择上传功能
2019/12/18 Javascript
[46:20]DOTA2-DPC中国联赛 正赛 PSG.LGD vs LBZS BO3 第二场 1月22日
2021/03/11 DOTA
Python实现多线程下载文件的代码实例
2014/06/01 Python
Python冒泡排序注意要点实例详解
2016/09/09 Python
解决Python 爬虫URL中存在中文或特殊符号无法请求的问题
2018/05/11 Python
Python 类的私有属性和私有方法实例分析
2019/09/29 Python
基于python requests selenium爬取excel vba过程解析
2020/08/12 Python
python利用xlsxwriter模块 操作 Excel
2020/10/14 Python
详解Html5微信支付爬坑之路
2018/07/24 HTML / CSS
佛罗里达州印第安河新鲜水果:Hale Groves
2017/02/20 全球购物
95%的面试官都会问到的50道Java线程题,附答案
2012/08/03 面试题
中学生打架检讨书
2014/02/10 职场文书
党支部活动策划方案
2014/08/18 职场文书
南京市纪委监察局整改方案
2014/09/16 职场文书
出纳试用期工作总结2015
2015/05/28 职场文书
2015年高三毕业班班主任工作总结
2015/10/22 职场文书