小程序自定义音频组件，带滚动条

摘要：首先自定义音频组件，是因为产品有这样的需求，需要如下样式的

而微信小程序API给我们提供的就是这样的

而且产品需要小程序有后台播放功能，所以我们不考虑小程序的 audio 组件，即使官方推荐更强大的 wx.createInnerAudioContext 但是不符合需求，所以这里用到的是 backgroundAudioManager()

https://developers.weixin.qq.com/miniprogram/dev/api/getBackgroundAudioManager.html

分析一下：这个页面构成，主要就是进度条和一些icon，进度条之前我自定义了一版，但是效果不理想，最后重构了页面，所以这里用的就是 slider 滑动选择器 https://developers.weixin.qq.com/miniprogram/dev/component/slider.html

audio.wxml

<view class="audio"><image class="bg" src="{{audio_article.lessonImg}}"></image><image mode="aspectFill" class="poster" src="{{audio_article.lessonImg}}"></image><view class="control-process"><text class="current-process">{{current_process}}</text><slider class="slider" bindchange="hanle_slider_change" bindtouchstart="handle_slider_move_start" bindtouchend="handle_slider_move_end" min="0" block-size="16" max="{{slider_max}}" activeColor="#fff" backgroundColor="rgba(255,255,255,.3)" value="{{slider_value}}"/><text class="total-process">{{total_process}}</text></view><view class="icon-list "><image bindtap="prev" mode="widthFix" src="{{is_first_page?'/images/audio_prev_no.png':'/images/audio_prev.png'}}" class="audio-icon"></image><image mode="widthFix" src="{{is_play? '/images/audio_play.png': '/images/audio_paused.png'}}" class="audio-icon audio-play" bindtap="audio_play"></image><image bindtap="next" mode="widthFix" src="{{is_last_page?'/images/audio_next_no.png':'/images/audio_next.png'}}" class="audio-icon"></image><image hidden mode="widthFix" class="pattern" src="{{is_loop ? '/images/audio_loop.png': '/images/audio_un_loop.png'}}" bindtap="play_loop"></image></view>
</view>

滑动事件 bindchange="hanle_slider_change"
开始滑动 bindtouchstart="handle_slider_move_start"
停止滑动 bindtouchend="handle_slider_move_end"

audio.wxss


.audio {position: relative;width: 750rpx;height: 640rpx;padding: 60rpx 32rpx 52rpx;box-sizing: border-box;text-align: center;overflow: hidden;background: rgba(0,0,0,.18);
}.audio .bg {position: absolute;top: 0;left: -100%;bottom: 0;right: 0;margin: auto;width: 300%;height: 300%;z-index: -1;filter: blur(40rpx);}
.editor {padding: 32rpx;box-sizing: border-box;color: #333;font-size: 28rpx;background: #fff;
}
.editor view {max-width: 100% !important;
}.audio .poster {width: 238rpx;height: 336rpx;
}
/* 音频滚动条start */
.control-process {margin-top: 20rpx;display: flex;justify-content: space-between;align-items: center;
}
.control-process .slider {width: 526rpx;
}
.control-process text {font-size: 24rpx;color: #fff;
}
/* 音频滚动条end */
.audio .icon-list {position: relative;margin: 0 auto;line-height: 102rpx;
}.audio .icon-list .audio-icon   .audio-icon {margin-left: 72rpx;
}.audio .icon-list .pattern {position: absolute;right: 20rpx;
}.audio image {width: 64rpx;height: 64rpx;vertical-align: middle;
}.audio .audio-play {width: 92rpx;height: 92rpx;
}.audio .pattern {position: absolute;top: 0;bottom: 0;margin: auto 0;width: 44rpx;height: 44rpx;
}/* 音频end  */

audio.js

/*** @author: 清风白水 https://www.cnblogs.com/luxiaoyao/* @date: 2018/07/20 14:36:00* @program: 重构音频页面*/
const APP = getApp()
const AUDIOMANAGER = getApp().globalData.global_bac_audio_manager.manage
const AUDIO = getApp().globalData.global_bac_audio_manager
Page({onLoad: function (e) {let that = this,request_param = {articleId: e.articleId}this.setData({article_id: e.articleId})wx.request({url: 'your url',method: 'POST',data: {},header: {'Content-Type': 'application/json;text/html;charset=utf-8;' },success: (res) => {if (res.data.code == 'A00000') {AUDIOMANAGER.onPlay(() => {setTimeout(() => {that.setData({is_loading: true})}, 300)})let response = res.data.data.information// 如果不是从悬浮按钮播放，就重新赋值if (e.articleId == AUDIO.id && AUDIO.is_play) {wx.seekBackgroundAudio({position: Math.floor(AUDIO.time)})} else {audio_background_play(response)}// 置灰上一首下一首if (response.preArticleId == 0) {that.setData({is_first_page: true})}if (response.nextArticleId == 0) {that.setData({is_last_page: true})}}}})//背景音频播放进度更新事件AUDIOMANAGER.onTimeUpdate(() => {if (!that.data.is_moving_slider) {that.setData({current_process: format(AUDIOMANAGER.currentTime),slider_value: Math.floor(AUDIOMANAGER.currentTime),total_process: format(AUDIOMANAGER.duration),slider_max: Math.floor(AUDIOMANAGER.duration)})}AUDIO.time = AUDIOMANAGER.currentTime})// 背景音频播放完毕AUDIOMANAGER.onEnded(() => {if (!that.data.is_loop) {that.next()} else {// 单曲循环that.setData({slider_value: 0,current_process: '00:00',})audio_background_play(response)}})},// 拖动进度条，到指定位置hanle_slider_change(e) {const position = e.detail.valuethis.seekCurrentAudio(position)},// 拖动进度条控件seekCurrentAudio(position) {// 更新进度条let that = thiswx.seekBackgroundAudio({position: Math.floor(position),success: function () {AUDIOMANAGER.currentTime = positionthat.setData({current_process: format(position),slider_value: Math.floor(position)})}})},// 进度条滑动handle_slider_move_start() {this.setData({is_moving_slider: true});},handle_slider_move_end() {this.setData({is_moving_slider: false});},// 点击播放暂停audio_play: function () {let that = thisif (this.data.is_play) {that.setData({is_play: false})wx.pauseBackgroundAudio()} else if (!this.data.is_play && this.data.is_ended) { // 这里是判断如果循环播放结束，没有下一首，重新播放 is_ended  是否是最后一首audio_background_play(that.data.audio_article)that.setData({is_play: true,is_ended: false})} else if(!this.data.is_play){that.setData({is_play: true})wx.playBackgroundAudio()}AUDIO.is_play = !AUDIO.is_play},// 点击是否循环play_loop: function () {let that = thisif (this.data.is_loop) {that.setData({is_loop: false})} else {that.setData({is_loop: true})}},// 上一首prev: function () {let that = thisif (that.data.audio_article.preArticleId != 0) {wx.redirectTo({url: '/pages/audio_article/audio_article?articleId='  that.data.audio_article.preArticleId})}},// 下一首next: function () {let that = thisif (that.data.audio_article.nextArticleId != 0) {wx.redirectTo({url: '/pages/audio_article/audio_article?articleId='  that.data.audio_article.nextArticleId})} else { // 如果是最后一首that.setData({is_play: false,slider_value: 0,current_process: '00:00',is_ended: true})AUDIO.is_play = false}},onUnload: function () {// 动态切换悬浮按钮的动态if (AUDIO.is_play) {APP.globalData.is_active = true} else {APP.globalData.is_active = false}}
})
// 时间格式化
function format(t) {let time = Math.floor(t / 60) >= 10 ? Math.floor(t / 60) : '0'   Math.floor(t / 60)t = time   ':'   ((t % 60) / 100).toFixed(2).slice(-2)return t
}
// 音频播放
function audio_background_play(response) {AUDIOMANAGER.src = response.urlCompressed ? response.urlCompressed : response.audioLink // 音频的数据源，默认为空字符串，当设置了新的 src 时，会自动开始播放 ，目前支持的格式有 m4a, aac, mp3, wavAUDIOMANAGER.title = response.articleName // 音频标题AUDIOMANAGER.epname = response.lessonName // 专辑名AUDIOMANAGER.singer = '****' // 歌手名AUDIOMANAGER.coverImgUrl = response.poster // 封面图url
}

app.js

  globalData: {userInfo: null,global_bac_audio_manager: {manage: wx.getBackgroundAudioManager(),is_play: false,id: '',play_time: '',article_id: '',}}

总结：在IOS端背景音频播放必须设置title 才可以播放

更多专业前端知识，请上【猿2048】www.mk2048.com

微信小程序自定义音频组件，自定义滚动条，单曲循环，循环播放相关推荐

微信小程序进度条组件自定义数字_微信小程序之圆形进度条（自定义组件）
前言昨天在微信小程序实现了圆形进度条,今天想把这个圆形进度条做成一个组件,方便以后直接拿来用. 根据官方文档自定义组件一步一步来创建自定义组遇新是直朋能到件第一步创建项遇新是直朋能到分览目结构 ...
微信小程序头部导航栏自定义
微信小程序头部导航栏自定义参考网址微信开放文档 navigationStyle导航栏样式:仅支持以下值:default默认样式,custom 自定义导航栏,只保留右上角胶囊按钮配置示例 {&quo ...
微信小程序：微信也可以发闪照了闪照制作生成微信小程序源码下载,自定义闪照时间
这是一款闪照制作的一款微信小程序源码该源码呢也就是让用户在微信也可以实现QQ上面的闪照功能用户可以自主上传照片,可以自定义的选择闪照的时间另外这款小程序还支持流量主模式这种东西目前在微信还是挺 ...
威信也可以发闪照了闪照制作生成微信小程序源码下载,自定义闪照时间
这是一款单照制作的一款微信小程序源码该源码呢也就是让用户在威信也可以实现Q上面的闪照功能用户可以自主上传照片,可以自定义的选择闪照的时间这种东西目前在威信还是挺少见的,用来在朋友面前装装还是挺好 ...
小程序源码：微信也可以发闪照了闪照制作生成微信小程序源码下载,自定义闪照时间
这是一款闪照制作的一款微信小程序源码该源码呢也就是让用户在微信也可以实现QQ上面的闪照功能用户可以自主上传照片,可以自定义的选择闪照的时间另外这款小程序还支持流量主模式这种东西目前在微信还是挺 ...
小程序源码：闪照制作生成微信小程序源码下载,自定义闪照时间-多玩法安装简单
这是一款闪照制作的一款微信小程序源码该源码呢也就是让用户在微信也可以实现QQ上面的闪照功能用户可以自主上传照片,可以自定义的选择闪照的时间另外这款小程序还支持流量主模式这种东西目前在微信还是挺 ...
免费的微信小程序客服消息自定义关键词自动回复管理系统
源码名称:微信小程序客服消息自定义关键词回复管理系统框架版本:laravel5.8,和thinkphp类似的框架,会thinkphp就会laravel. 适用范围:二次开发,独立部署,客服自动回复 ...
微信小程序顶部导航栏自定义，根据不同手机自适应距离状态栏高度，防止标题栏高度歪歪扭扭
微信小程序顶部导航栏自定义,根据不同手机自适应距离状态栏高度一.微信小程序顶部导航栏自定义 "navigationStyle": "custom" app. ...
微信小程序的父子组件传值
微信小程序的父子组件传值如果小程序中有可复用的UI且具有一定的功能性,就可以使用自定义组件将其封装起来. 下面介绍父子组件的数据传递方法,以及一个简单的组件和一个复杂的组件示例. 二.父子组件传递数 ...
A095_day01_微信小程序入门与组件
目录微信小程序入门与组件 - Day01 1.内容介绍 2.微信小程序简介(了解) 2.1.什么是小程序 2.2.微信小程序与app的区别 2.3.小程序在入口 2.4.微信小程序的工作原理 2.5 ...

微信小程序自定义音频组件，自定义滚动条，单曲循环，循环播放

小程序自定义音频组件，带滚动条

微信小程序自定义音频组件，自定义滚动条，单曲循环，循环播放相关推荐

最新文章

热门文章