微信小程序音乐播放器开发


Posted in Javascript onNovember 20, 2019

前言 

这篇文章上一版本是用audio组件开发的播放器,随后反应音频加载速度慢的问题

微信小程序音乐播放器开发

又用小程序内置的背景音乐播放的方法写了一遍,逻辑是一样的逻辑,希望对大家有所帮助!

<view class='audiosBox'>
  <view class="audioOpen" bindtap="listenerButtonPlay" wx:if="{{!isOpen}}">
   <image class='image2' src="../../images/play.png" />
  </view>
  <view class="audioOpen" bindtap="listenerButtonPause" wx:if="{{isOpen}}">
   <image src="../../images/pauses.png" />
  </view>
  <view class='slid'>
   <slider bindchange="sliderChange" block-size="12px" step="2" value="{{offset}}" max="{{max}}" selected-color="#4c9dee" />
   <view>
    <text class='times'>{{starttime}}</text> <!-- 进度时长 -->
    
    <text class='times'>{{duration}}</text>  <!-- 总时长 -->
   </view>
  </view>
</view>

js部分注意了:bug ios 播放时必须加title 不然会报错导致音乐不播放

//index.js
//获取应用实例
const bgMusic = wx.getBackgroundAudioManager()
const app = getApp()
 
Page({
 data: {
  isOpen: false,//播放开关
  starttime: '00:00', //正在播放时长
  duration: '06:41',  //总时长
  src:"http://ws.stream.qqmusic.qq.com/M500001VfvsJ21xFqb.mp3?guid=ffffffff82def4af4b12b3cd9337d5e7&uin=346897220&vkey=6292F51E1E384E061FF02C31F716658E5C81F5594D561F2E88B854E81CAAB7806D5E4F103E55D33C16F3FAC506D1AB172DE8600B37E43FAD&fromtag=46"
 },
 // 播放
 listenerButtonPlay: function () {
  var that = this
  //bug ios 播放时必须加title 不然会报错导致音乐不播放
  bgMusic.title = '此时此刻' 
  bgMusic.epname = '此时此刻'
  bgMusic.src = that.data.src;
  bgMusic.onTimeUpdate(() => { 
   //bgMusic.duration总时长 bgMusic.currentTime当前进度
   console.log(bgMusic.currentTime)
   var duration = bgMusic.duration; 
   var offset = bgMusic.currentTime; 
   var currentTime = parseInt(bgMusic.currentTime);
   var min = "0" + parseInt(currentTime / 60);
   var max = parseInt(bgMusic.duration);
   var sec = currentTime % 60;
   if (sec < 10) {
    sec = "0" + sec;
   };
   var starttime = min + ':' + sec;  /* 00:00 */
   that.setData({
    offset: currentTime,
    starttime: starttime,
    max: max,
    changePlay: true
   })
  })
  //播放结束
  bgMusic.onEnded(() => {
   that.setData({
    starttime: '00:00',
    isOpen: false,
    offset: 0
   })
   console.log("音乐播放结束");
  })
  bgMusic.play();
  that.setData({
   isOpen: true,
  })
 },
 //暂停播放
 listenerButtonPause(){
   var that = this
  bgMusic.pause()
  that.setData({
   isOpen: false,
  })
 },
 listenerButtonStop(){
  var that = this
  bgMusic.stop()
 },
 // 进度条拖拽
 sliderChange(e) {
  var that = this
  var offset = parseInt(e.detail.value);
  bgMusic.play();
  bgMusic.seek(offset);
  that.setData({
   isOpen: true,
  })
 },
 // 页面卸载时停止播放
 onUnload() {
  var that = this
  that.listenerButtonStop()//停止播放
  console.log("离开")
 },
})

css部分 

/**index.wxss**/
.audiosBox{
 width: 92%;
 margin: auto;
 height: 130rpx;
 display: flex;
 justify-content: space-between;
 align-items: center;
 background: #f6f7f7;
 border-radius: 10rpx;
}
/*按钮大小 */
.audioOpen{
 width: 70rpx;
 height: 70rpx;
 border: 2rpx solid #4c9dee;
 border-radius: 50%;
 display: flex;
 align-items: center;
 justify-content: center;
 margin-left: 20rpx;
}
 
image{
 width: 30rpx;
 height: 40rpx;
}
.image2{
 margin-left: 10%;
}
/*进度条长度 */
.slid{
 flex: 1;
 position: relative;
}
.slid view{
 display: flex;
 justify-content: space-between;
}
.slid view>text:nth-child(1){
 color: #4c9dee;
 margin-left:6rpx; 
}
.slid view>text:nth-child(2){
 margin-right:6rpx; 
}
slider{
 width: 520rpx;
 margin: 0;
 margin-left: 35rpx;
}
/*横向布局 */
.times{
 width: 100rpx;
 text-align: center;
 display: inline-block;
 font-size: 24rpx;
 color:#999999;
 margin-top: 5rpx;
}
.title view{
 text-indent: 2em;
 
}

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

Javascript 相关文章推荐
Javascript事件热键兼容ie|firefox
Dec 30 Javascript
javascript中length属性的探索
Jul 31 Javascript
jquery图片延迟加载 前端开发技能必备系列
Jun 18 Javascript
js实现无需数据库的县级以上联动行政区域下拉控件
Aug 14 Javascript
jquery.autocomplete修改实现键盘上下键自动填充示例
Nov 19 Javascript
JQuery中使用.each()遍历元素学习笔记
Nov 08 Javascript
jQuery实现首页图片淡入淡出效果的方法
Jun 10 Javascript
angularjs学习笔记之简单介绍
Sep 26 Javascript
功能强大的Bootstrap使用手册(一)
Aug 02 Javascript
基于Bootstrap模态对话框只加载一次 remote 数据的解决方法
Jul 09 Javascript
Vue 自定义标签的src属性不能使用相对路径的解决
Sep 17 Javascript
前端监听websocket消息并实时弹出(实例代码)
Nov 27 Javascript
微信小程序实现音乐播放器
Nov 20 #Javascript
vue移动端模态框(可传参)的实现
Nov 20 #Javascript
微信小程序实现上拉加载功能
Nov 20 #Javascript
微信小程序实现锚点功能
Nov 20 #Javascript
vue实现element表格里表头信息提示功能(推荐)
Nov 20 #Javascript
微信小程序实现时间进度条功能
Nov 17 #Javascript
小程序实现投票进度条
Nov 20 #Javascript
You might like
Drupal7连接多个数据库及常见问题解决
2014/03/02 PHP
CI分页类首页、尾页不显示的解决方法
2016/03/28 PHP
PHP单例模式是什么 php实现单例模式的方法
2016/05/14 PHP
php实现通过stomp协议连接ActiveMQ操作示例
2020/02/23 PHP
在html页面中包含共享页面的方法
2008/10/24 Javascript
利用javascript/jquery对上传文件格式过滤的方法
2009/07/25 Javascript
JQUERY获取form表单值的代码
2010/07/17 Javascript
javascript for循环从入门到偏门(效率优化+奇特用法)
2012/08/01 Javascript
更快的异步执行(setTimeout多浏览器)
2014/08/12 Javascript
ECMAScript6函数剩余参数(Rest Parameters)
2015/06/12 Javascript
使用jQuery调用XML实现无刷新即时聊天
2016/08/07 Javascript
jQuery分页插件jquery.pagination.js使用方法解析
2017/02/09 Javascript
深入探究AngularJs之$scope对象(作用域)
2017/07/20 Javascript
浅谈React的最大亮点之虚拟DOM
2018/05/29 Javascript
Vue v-for循环之@click点击事件获取元素示例
2019/11/09 Javascript
[54:57]DOTA2-DPC中国联赛定级赛 Aster vs DLG BO3第二场 1月8日
2021/03/11 DOTA
python实现的登陆Discuz!论坛通用代码分享
2014/07/11 Python
使用python编写批量卸载手机中安装的android应用脚本
2014/07/21 Python
两个命令把 Vim 打造成 Python IDE的方法
2016/03/20 Python
python广度优先搜索得到两点间最短路径
2019/01/17 Python
对Django中的权限和分组管理实例讲解
2019/08/16 Python
python爬虫豆瓣网的模拟登录实现
2019/08/21 Python
python 一篇文章搞懂装饰器所有用法(建议收藏)
2019/08/23 Python
CSS3文本换行word-wrap解决英文文本超过固定宽度不换行
2013/10/10 HTML / CSS
CSS3实现背景透明文字不透明的示例代码
2018/06/25 HTML / CSS
开普敦通行证:Cape Town Pass
2019/07/18 全球购物
法国滑雪假期的专家:Ski Planet
2019/11/02 全球购物
博士生入学考试推荐信
2013/11/17 职场文书
十月份红领巾广播稿
2014/01/22 职场文书
高中体育教学反思
2014/01/24 职场文书
大学军训感言600字
2014/02/25 职场文书
五一促销活动总结
2014/07/01 职场文书
建筑管理专业求职信
2014/07/28 职场文书
行政秘书工作自我鉴定
2014/09/15 职场文书
实现一个简单得数据响应系统
2021/11/11 Javascript
SQL优化老出错,那是你没弄明白MySQL解释计划用法
2021/11/27 MySQL