文档章节

微信小程序学习笔记(四)音乐播放器(底部播放组件)

AzureMonkey
 AzureMonkey
发布于 03/27 13:06
字数 1261
阅读 32
收藏 0

微信小程序学习笔记(四)音乐播放器(底部播放组件)

底部的播放组件,主要有播放控制(上一曲、播放/暂停、下一曲)、播放进度条组成。而这些组件的内容是根据当前播放的歌曲而改变的,因此需要进行动态的绑定。另外,播放与暂停按钮任意时刻只能显示其中一个,其是否显示取决于当前正在播放歌曲的状态,如果暂停,则显示播放,否则显示暂停。所以首先在在musicdemo.js的data中,添加正在播放歌曲的相关数据。

一、musicdemo.js

data: {
    /**当前歌曲播放状态,true正在播放,false暂停 */
    isPlay:true,
    /**当前播放的位置(时间) */
    currentTime: 1000,
    /**当前播放歌曲的总时间 */
    totalTime: 6800, 
    /**正播放歌曲信息 */
    currentPlayMusic: {
      musicImage:"/img/list_1.jpg",
      musicName:"驿动的心",
      singerName:"姜育恒",
      musicSrc:"/music/驿动的心.mp3"
    },
    /**页面Tab标签数据 */
    tab:0     
  },

二、musicdemo.wxml的设计

<!--页面底部播放组件-->
  <view class="footer">
    <!--播放控制-->
    <view class="current-music-controls">
      <image src="/img/myUp.png" />
      <image src="/img/icon-play.png" hidden="{{isPlay}}" />
      <image src="/img/icon-pause.png" hidden="{{!isPlay}}" />
      <image src="/img/myNext.png" />
    </view>
    <!--播放进度条-->
    <view class="current-music-playback-progress">
      <text>{{currentTime}}</text>
      <slider block-size="12" block-color="red"></slider>
      <text>{{totalTime}}</text>
    </view>
  </view>
  <!--页面底部播放组件结束-->

三、musicdemo.wxss样式的设置

/*==============底部样式设置====================*/
.footer{
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
  height: 12vh;
  background-color: yellowgreen;
}
.current-music-controls{
  flex: 3;
  text-align: center;
}
.footer>.current-music-controls>image{
  margin: 0 1px;
  width: 65rpx;
  height: 65rpx;
}
.current-music-playback-progress{
  flex: 7;  
}
.footer>.current-music-playback-progress>slider{
  display: inline-block;
  width: 35vw;
}

最终效果如下所示

四、播放音乐

音乐的播放使用InnerAudioContext,它可通过wx.createInnerAudioContext接口获取实例。它的常用属性有

string src:音频资源的地址,用于直接播放

boolean autoplay:是否自动播放,默认为false

number duration:当前音频的长度(单位s)。只有在当前有合法的src时返回(只读)

number currentTime:当前音频的播放位置(单位s)。只有在当前有合法的src时返回,时间保留小数点后6位(只读)

常用方法:

InnerAudioContext.play():播放

InnerAudioContext.pause():暂停

InnerAudioContext.seek(number position):路转到指定位置

InnerAudioContext.onEnded(function callback):监听音频自然播放至结束的事件

InnerAudioContext.onTimeUpdate(function callback):监听音频播放进度更新事件。

以上的属性和方法是本程序用到的,其它的属性和方法,请参阅官方文档。

1.创建InnerAudioContext实例

首先在data中创建musicCtx。然后在onLoad函数中创建InnerAudioContext实例,

data: {
    /**InnerAudioContext实例 */
    musicCtx:"",



/**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    this.data.musicCtx = wx.createInnerAudioContext();//创建InnerAudioContext实例
    this.data.musicCtx.autoplay=true;//自动播放
    this.data.musicCtx.src=this.data.currentPlayMusic.musicSrc;//设置播放音乐
  },

此时,即可以实现音乐的播放。

2.音乐的暂停与播放

当程序运行时,播放默认的歌曲,即处于播放状态。接下来,实现音乐播放的控制功能。首先要为播放与暂停按钮绑定事件,然后在js文件中,进行事件的处理。

musicdemo.wxml代码

<image src="/img/icon-play.png" hidden="{{isPlay}}" bindtap="playMusic" />
<image src="/img/icon-pause.png" hidden="{{!isPlay}}" bindtap="pauseMusic" />

musicdemo.js代码

/**音乐播放控制函数 */
  musicPlay:function(){
    this.data.musicCtx.play();
    this.setData({
      isPlay:true
    })
  },
  musicPause:function(){  
    this.data.musicCtx.pause();
    this.setData({
      isPlay:false
    })
  },

  /**
   * 生命周期函数--监听页面加载
   */

3.显示播放进度

播放进度,需要取得当前音乐的播放位置及音乐的总长度,然后对时间进行格式化进行显示。musicDemo.wxml代码修改如下:

<!--播放进度条-->
    <view class="current-music-playback-progress">
      <text>{{showMusicPlayTime}}</text>
      <slider value="{{currentTime}}" block-size="12" block-color="red" min="0" max="{{totalTime}}"></slider>
      <text>{{showMusicTotalTime}}</text>
    </view>

musicDemo.js代码修改如下:

首先在page上面声明函数

/**格式化时间 */
function formatTime(time) {
  var f = parseInt(time / 60)
  var s = (time % 60).toFixed(0)
  return f + ":" + s
}

Page({
  /**
   * 页面的初始数据
   */
  data: {
    /**当前显示播放时间 */
    showMusicPlayTime:"",
    /**显示当前歌曲的总时间 */
    showMusicTotalTime:"",



/**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    this.data.musicCtx = wx.createInnerAudioContext();//创建InnerAudioContext实例
    this.data.musicCtx.autoplay=true;//自动播放
    this.data.musicCtx.src=this.data.currentPlayMusic.musicSrc;//设置播放音乐
    
    this.data.musicCtx.onTimeUpdate(() => {//更新进度条
      this.setData({
        currentTime:this.data.musicCtx.currentTime,
        totalTime:this.data.musicCtx.duration,
        showMusicPlayTime: formatTime(this.data.musicCtx.currentTime),
        showMusicTotalTime: formatTime(this.data.musicCtx.duration)
      })
    })
  },

4.实现进度条选择播放

实现进度条选择播放,需要获取到用户在进度条上选择的时间点。然后调用InnerAudioContext的seek方法即可。

InnerAudioContext.seek(number position):跳转到指定位置

参数:number position 跳转的时间,单位 s。精确到小数点后 3 位,即支持 ms 级别精确度

bindchange eventhandle   完成一次拖动后触发的事件,event.detail = {value}

musicdemo.wxml代码如下:

<slider bindchange="seekPlay" value="{{currentTime}}" block-size="12" block-color="red" min="0" max="{{totalTime}}"></slider>

musicdemo.js代码如下:

/**进度条点击播放 */
  seekPlay:function(e){
    this.data.musicCtx.seek(e.detail.value);//跳转到相应位置播放
  },

至此,页面底部的播放组件已完成。

© 著作权归作者所有

AzureMonkey
粉丝 24
博文 75
码字总数 54624
作品 0
新乡
其他
私信 提问
加载中

评论(0)

小程序大全第一行代码:目录(不断更新)

小程序大全第一行代码 小程序官方文档:https://developers.weixin.qq.com/miniprogram/dev/ 前言 为什么要学习微信小程序呢?作为一位普普通通的程序员没人告诉你为什么的,只有你自己知道,...

达叔小生
2018/09/04
0
0
微信小程序有旋转动画效果的音乐组件

在微信开发中,写过的一个简单的音乐播放组件,记录下。 music 音乐播放组件。 属性 属性名 类型 默认值 说明 music String 传入的音乐资源地址 musicStyle String (随便写了个) 音乐组件的样...

大众美男典范
2018/08/21
0
0
微信小程序又有新功能,这次变得更好玩了!

微信小程序又有新功能,这次变得更好玩了! 一段时间不见的、来自微信官方的、让小编忍不住翻白眼的大招再次重现,这次小程序又带来两个新能力:录音、拍照、视频播放等多媒体能力全面升级;...

湃点科技
2017/12/20
2
0
微信小程序开发之音乐播放器 真机测试 audio API

简单的试了试播放器,还是有不少坑的.开始在模拟器上跑,一直没有声音,总是刚开始播放就暂停.做个笔记. 准备资源: 音乐图片地址:http://ac-5g9r20ds.clouddn.com/63bedb5f584234b6827c.jpg 音乐...

dzp_coder
2016/11/09
0
0
没朋友(mpvue),还有音乐陪你

炎炎夏日,剧烈的高温也抵挡不住对学习的坚持。对于学习,很多时候都会有松懈和逃避的心理,但看到身边近乎疯狂的考研党们,我还是选择了坚持。距离上次发文章已经有一个月之久了,期间学习了...

我服啦
2018/07/23
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Apache OpenMeetings开源线上会议系统——安装配置

OpenMeetings是一个开源的在线会议系统,支持音频和视频,同时支持桌面分享。 官网地址:http://openmeetings.apache.org/index.html 安装 当前版本为4.0.6,需要最低jre8的安装环境。 下载a...

JustForFly
19分钟前
21
0
Android知识体系总结2020之Android部分Handler篇

1.什么是Handler?   Handler是可以通过发送和处理Message和Runnable对象来关联相应线程的MessageQueue。通常我们认为它是一种异步机制。   a.可以让对应的Message和Runnable在未来的某个...

ClAndEllen
20分钟前
29
0
命令模式

命令模式(Command Pattern)在我们生活中非常常见,比如开关灯、电视遥控器换台等。 我们使用摇控器换台的时候,我们按下一个换台的按钮,然后电视机就会换台,按下调整音量调节按钮,电视机...

鸣沙山
23分钟前
20
0
基于 rsync 和 ln 实现“写时复制”的快照备份功能

一、基本原理 这里“写时复制”加了一个引号,因为这是专门针对使用rsync备份时的写时复制效果,而不是事实上的写时复制(copy-on-write),其达到的目的如下: 使用 rsync 备份数据后,立即...

Inpool
59分钟前
28
0
郑州哪哪里可以开工程款发票-郑州_新闻网

【电薇同步;1.3.8 - 2.7.4.1 - 5.2.9.7.】张生、诚、信、合、作,保、真、售、后、保、障、长、期、有、效。adb的全称为Android Debug Bridge,是Android手机通用...

yyqqvip
今天
30
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部