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

前言 

这篇文章上一版本是用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;

}

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

时间: 2019-11-18

微信小程序开发之视频播放器 Video 弹幕 弹幕颜色自定义实例

把录音的模块尝试过之后就想着微信小程序的视频播放会不会更有趣? 果然,微信小程序视频自带弹幕.是不是很爽,跟我一起来看看. 先上gif: 再上几张图: 1.视频播放器 2.选择弹幕颜色 3.弹幕来了... 1.视频播放器 微信已经封装的非常好.我这里只用了很简单的几个属性 由于以前没做过弹幕,看到danmu-list就激动了.而且只需要将弹幕内容加入集合即可. 弹幕列表的元素: { text: '第 1s 出现的红色弹幕',//文本 color: '#ff0000',//颜色 time: 1//

微信小程序 开发之滑块视图容器(swiper)详解及实例代码

微信小程序 开发之滑块视图容器详解 实现效果图: 实现起来特别简单,看看代码是怎么写的呢: <swiper class="swiper" indicator-dots="{{indcatorDots}}" autoplay="{{autoPlay}}" interval="{{interval}}" duration="{{duration}}"> <block wx:for="

微信小程序开发之相册选择和拍照详解及实例代码

微信小程序 拍照和相机选择详解 前言: 小程序中获取图片可通过两种方式得到,第一种是直接打开微信内部自己的样式,第一格就是相机拍照,后面是图片,第二种是弹框提示用户是要拍照还是从相册选择,下面一一来看. 选择相册要用到wx.chooseImage(OBJECT)函数,具体参数如下: 直接来看打开相机相册的代码: Page({ data: { tempFilePaths: '' }, onLoad: function () { }, chooseimage: function () { var t

微信小程序开发的四十个技术窍门总结(推荐)

前言 微信"小程序"正式上线一周时间,相关话题持续升温.支付宝开发"小程序"的消息也随即曝出,互联网巨头们摩拳擦掌,不少网友调侃说,这势头感觉要挑战现有的"APP帝国"了.那么,面对如此炙手可热的小程序,WeX5移动开发云也没有闲着,经过全网搜索,为大家筛选出一条小程序开发者的必读文章,内容涵盖小程序开发实战需要注意的40个技术点,供大家参考! Q:为什么脚本内不能使用window等对象 A:页面的脚本逻辑是在JsCore中运行,JsCore是一

微信小程序停止其他视频播放当前视频的实例代码

微信小程序停止其他视频播放当前视频,代码如下所示: <view class="content"> <!--首页--> <scroll-view class='nav-page'> <view class="item-box " wx:for="{{videelsi}}" wx:key="item"> <!-- 标题层 --> <!-- 视频图片层 -->

微信 小程序开发环境搭建详细介绍

微信小程序可谓是今天最火的一个名词了,一经出现真是轰炸了整个开发人员,当然很多App开发人员有了一个担心,微信小程序的到来会不会给移动端App带来一个寒冬,身为一个Android开发者我是不相信的,即使有,那也是很遥远的未来. 不管微信小程序是否能颠覆当今的开发格局,我们都要以好奇的心态去接收,去学习.不排斥新技术,所以,心动不如行动,赶紧先搭建一个微信小程序开发工具.那么接下来就让我们一起来开始吧. 先放一张Github上demo的动态图 开发工具下载是看到GitHub上的分享.那么你可以直接

微信小程序开发之选项卡(窗口底部TabBar)页面切换

微信小程序开发中窗口底部tab栏切换页面很简单很方便. 代码: 1.app.json //app.json { "pages":[ "pages/index/index", "pages/logs/logs" ], "window":{ "backgroundTextStyle":"light", "navigationBarBackgroundColor": &qu

微信小程序开发图片拖拽实例详解

微信小程序开发图片拖拽实例详解 1.编写页面结构:moveimg.wxml <view class="container"> <view class="cnt"> <image class="image-style" src="../uploads/foods.jpg" style="left:{{ballleft}}px;width:{{screenWidth}}px" bi

微信小程序开发之实现选项卡(窗口顶部TabBar)页面切换

微信小程序开发中选项卡.在Android中选项卡一般用fragment,到了小程序这里瞬间懵逼了. 总算做出来了.分享出来看看. 先看效果: 再上代码: 1.index.wxml <!--index.wxml--> <view class="swiper-tab"> <view class="swiper-tab-list {{currentTab==0 ? 'on' : ''}}" data-current="0"

微信小程序开发入门基础教程

微信小程序开发入门基础教程 本文档将带你一步步创建完成一个微信小程序,并可以在手机上体验该小程序的实际效果. 开发准备工作获取微信小程序的 AppID 登录 https://mp.weixin.qq.com ,就可以在网站的"设置"-"开发者设置"中,查看到微信小程序的 AppID 了,注意不可直接使用服务号或订阅号的 AppID . 下载开发工具 下载地址:https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/dow