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


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 有趣而诡异的数组
Apr 06 Javascript
jquery选择器之内容过滤选择器详解
Jan 27 Javascript
jquery中的$(document).ready()使用小结
Feb 14 Javascript
WEB 前端开发中防治重复提交的实现方法
Oct 26 Javascript
将鼠标焦点定位到文本框最后(代码分享)
Jan 11 Javascript
JS正则表达式完美实现身份证校验功能
Oct 18 Javascript
Node.js 中使用 async 函数的方法
Nov 20 Javascript
详解Nuxt.js中使用Element-UI填坑
Sep 06 Javascript
layui自己添加图片按钮并点击跳转页面的例子
Sep 14 Javascript
Vue的click事件防抖和节流处理详解
Nov 13 Javascript
JavaScript实现简单的计算器
Jan 16 Javascript
Canvas三种动态画圆实现方法说明(小结)
Apr 16 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
虹吸壶煮咖啡26个注意事项
2021/03/03 冲泡冲煮
提升PHP执行速度全攻略(下)
2006/10/09 PHP
PhpDocumentor 2安装以及生成API文档的方法
2014/05/21 PHP
编写PHP脚本来实现WordPress中评论分页的功能
2015/12/10 PHP
PHP获取当前文件的父目录方法汇总
2016/07/21 PHP
PHP Swoole异步读取、写入文件操作示例
2019/10/24 PHP
15 个 JavaScript Web UI 库
2010/05/19 Javascript
JS验证日期的格式YYYY-mm-dd 具体实现
2013/06/29 Javascript
为指定的元素添加遮罩层的示例代码
2014/01/15 Javascript
jQuery实现动画效果的简单实例
2014/01/27 Javascript
jQuery修改class属性和CSS样式整理
2015/01/30 Javascript
jquery图片滚动放大代码分享(2)
2015/08/28 Javascript
使用ReactJS实现tab页切换、菜单栏切换、手风琴切换和进度条效果
2016/10/17 Javascript
JS/jQuery判断DOM节点是否存在的简单方法
2016/11/24 Javascript
angularjs ocLazyLoad分步加载js文件实例
2017/01/17 Javascript
jquery+ajax实现省市区三级联动 (封装和不封装两种方式)
2017/05/15 jQuery
node app 打包工具pkg的具体使用
2019/01/17 Javascript
基于vue+echarts 数据可视化大屏展示的方法示例
2020/03/09 Javascript
javascript实现时间日期的格式化的方法汇总
2020/08/06 Javascript
JavaScript实现点击自制菜单效果
2021/02/02 Javascript
[01:02:05]LGD vs Mineski 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
Python中的super用法详解
2015/05/28 Python
Python简单计算文件夹大小的方法
2015/07/14 Python
Python实现动态图解析、合成与倒放
2018/01/18 Python
django DRF图片路径问题的解决方法
2018/09/10 Python
python rsync服务器之间文件夹同步脚本
2019/08/29 Python
python3 使用Opencv打开USB摄像头,配置1080P分辨率的操作
2019/12/11 Python
python实现猜拳游戏
2020/03/04 Python
HTML5中使用postMessage实现Ajax跨域请求的方法
2016/04/19 HTML / CSS
一份软件工程师的面试试题
2016/02/01 面试题
工程造价自荐信
2013/10/09 职场文书
渔夫的故事教学反思
2014/02/14 职场文书
小学生运动会报道稿
2014/09/12 职场文书
2015新年联欢晚会开场白
2014/12/14 职场文书
2015年高校图书馆工作总结
2015/04/30 职场文书
委托开发合同书(标准版)
2019/08/07 职场文书