【微信小程序】简易音乐播放器，进度条拖拉、音乐的播放与暂停

小程序简易音乐播放器实现

粗糙的页面设计：

wxml部分：

<view class="test"><view class="img"><image class="img" src="http://p4.music.126.net/aG5zqxkBRfLiV7A8W0iwgA==/109951166702962263.jpg"></image></view><view class="musicPlay"><text class="begin">{{nowTime}}</text><slider bindchange="sliderChange" class="slider" block-size="12px" max="256" value="{{value}}"></slider><text class="end">04:16</text></view><button bindtap="isPlay">{{isPlayText}}</button>
</view>

wxss部分：

.test {width: 90%;margin: auto;
}.img {width: 500rpx;height: 500rpx;margin: auto;margin-bottom: 200rpx;margin-top: 100rpx;border-radius: 50%;
}.musicPlay {display: flex;flex-direction: row;margin-bottom: 50rpx;
}.slider {width: 80%;
}.begin, .end {box-sizing: border-box;padding-top: 15rpx;
}

js部分：

// pages/index/index.js
Page({/*** 页面的初始数据*/data: {isPlay : false, // 控制音乐播放nowTime : '00:00', // 当前音乐播放时间value : 0, // 对应silder的valueisPlayText : '播放' // 播放按钮显示文本},// 控制播放/*     1、点击按钮时，对按钮进行取反，然后再赋值2、当音乐未播放时，按钮应该显示为：播放，当音乐正在播放时，按钮应该显示为：暂停3、每次点击按钮，都会调用musicPlay()方法，来让音乐暂停或播放*/isPlay () {this.setData({isPlay : !this.data.isPlay,})if(this.data.isPlay){this.setData({isPlayText : '暂停'})}else {this.setData({isPlayText : '播放'})}this.musicPlay(this.data.isPlay)},// 控制音乐播放暂停// 当被调用时，根据传进来的isPlay的值判断音乐播放或暂停musicPlay (isPlay) {if(this.data.isPlay){// 这里使用的全局数据isPlay，而不是传进来的参数// 最开始isPlay为flase，走不进来if，使用歌曲不会播放wx.getBackgroundAudioManager().title = '孤勇者';wx.getBackgroundAudioManager().src = 'http://music.163.com/song/media/outer/url?id=1901371647.mp3';}if(!isPlay) {// 音乐的暂停// console.log(!isPlay);wx.getBackgroundAudioManager().pause();}else {// 音乐的播放// console.log(isPlay);wx.getBackgroundAudioManager().play();}},// 时间转换 s转换成m:s形式/* 这里传进来的是s，要显示为00:00的形式，要做一些转换，1、m表示分，s表示秒2、m是传进来的数取整3、s是传进来的数取余4、当m小于10的时候，要拼接字符串为'0m'，暂且不考虑m>100的情况，那也太恐怖了5、当s<10时，与m同理，还好100不可能   6、然后拼接  */ms:function (test) {var m = 0,s = 0;m = parseInt(test/60);if(m < 10) {m = '0' + m;}s = parseInt(test%60);if(s<10) {s = '0' + s;}return m + ':' +  s;},// 拖动进度条改变/*1、在slider上绑定一个事件，我们可以通过这个事件知道value值的改变，然后通过更新全局数据，来改变wxml上的value值2、wx.getBackgroundAudioManager().seek()跳转到指定位置，我们跳转到v的位置*/sliderChange: function (e) {var v = e.detail.value;this.setData({value : v})wx.getBackgroundAudioManager().seek(v)},/*** 生命周期函数--监听页面加载*/onLoad: function (options) {// 监听背景音频播放进度更新事件wx.getBackgroundAudioManager().onTimeUpdate(() => {var time = wx.getBackgroundAudioManager().currentTime;var nowTime = this.ms(time);this.setData({nowTime : nowTime,value : parseInt(time)})});// 监听背景音频播放结束wx.getBackgroundAudioManager().onEnded(() => {this.setData({isPlay : false,isPlayText : '播放'})})},/*** 生命周期函数--监听页面初次渲染完成*/onReady: function () {},/*** 生命周期函数--监听页面显示*/onShow: function () {},/*** 生命周期函数--监听页面隐藏*/onHide: function () {},/*** 生命周期函数--监听页面卸载*/onUnload: function () {},/*** 页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh: function () {},/*** 页面上拉触底事件的处理函数*/onReachBottom: function () {},/*** 用户点击右上角分享*/onShareAppMessage: function () {}
})

app.json部分：

{"pages": ["pages/index/index"],"requiredBackgroundModes": ["audio", "location"],"window": {"backgroundTextStyle": "light","navigationBarBackgroundColor": "#fff","navigationBarTitleText": "Weixin","navigationBarTextStyle": "black"},"style": "v2","sitemapLocation": "sitemap.json"
}

注意：
1、测试数据可能会失效，可使用自己的数据
2、slider中设置的max为固定值
3、小程序BackgroundAudioManager相关知识：https://developers.weixin.qq.com/miniprogram/dev/api/media/background-audio/BackgroundAudioManager.html
4、小程序slider相关知识：
https://developers.weixin.qq.com/miniprogram/dev/component/slider.html

如果有更好的建议，或者文章中存在错误的地方，请及时指出，感谢！

【微信小程序】简易音乐播放器，进度条拖拉、音乐的播放与暂停相关推荐

PHP进度条小程序,用微信小程序实现一个圆形的进度条
随着小程序的热度下降,更多的人已经开始静下心来开发微信小程序了,最近在开发一款微信小程序的过程中遇到了一个问题:如何用微信小程序实现一个圆形的进度条?整理一番后,记录下来与大家共享. 代码实现的思路原 ...
微信小程序隐藏video标签的进度条组件
微信小程序隐藏video标签的进度条组件直接上代码 <video direction="0" show-fullscreen-btn="{{false}}&quo ...
微信小程序音频或视频拖动进度条时间不变解决方法
问题描述: 微信小程序在较新版本的音频接口中推荐使用InnerAudioContext对象实现音频的播放.暂停.跳转等功能,通过监听接口回调实现. InnerAudioContext.onTimeUp ...
微信小程序—半圆（弧形）进度条
效果图: <canvas class="canvas" style="width:{{canvasWidth}}px;height:{{canvasHeight}} ...
微信小程序-简易计算器
代码地址如下: http://www.demodashi.com/demo/14210.html 一.前期准备工作软件环境:微信开发者工具官方下载地址:https://mp.weixin.qq.c ...
微信小程序背景音乐官方实例代码无效问题解决及音乐src获取方法
微信小程序背景音乐官方实例代码无效问题解决及音乐src获取方法参考文章: (1)微信小程序背景音乐官方实例代码无效问题解决及音乐src获取方法 (2)https://www.cnblogs.com/ ...
第7课微信小程序实现图片搜索器案例：
第7课微信小程序实现图片搜索器案例: 效果图如下: 手机运行效果: 来我们来看看代码的全局样式: 首先在app.json内的pages把需要的index1.index2页面注册之后我们只需写ind ...
微信小程序简易搭建之框架/组件库
微信小程序简易搭建之框架/组件库 Vant weapp 下面看看如何导入 https://github.com/youzan/vant-weapp 使用教程: 1.下载后找到dist 2. 在你的项目 ...
微信小程序实现一个文件管理器
微信小程序实现一个文件管理器虽然标题说是实现一个文件管理器,但我是用来管理预加载小程序可能用的网络资源的,尤其是要是用音效资源时. 小程序的包体即便是分包也是每个分包的资源大小是2m,像音频资源,使 ...
uniapp - [微信小程序] 超详细实时录音功能，录制外部声音及播放上传到服务器（支持录音完毕生成 mp3、试听音频(带进度条)、暂停录音、重新录音、限制录音最大时长、自定义音频名称等功能）
前言网上的教程都太乱了,功能不好用且一堆 BUG,没有注释很难改造示例为自己用. 本文实现了 uniapp 微信小程序平台,授权麦克风进行录音并保存为音频的功能,内置播放器可播放录音文件, 您直接复 ...

【微信小程序】简易音乐播放器，进度条拖拉、音乐的播放与暂停

小程序简易音乐播放器实现

【微信小程序】简易音乐播放器，进度条拖拉、音乐的播放与暂停相关推荐

最新文章

热门文章