2023年6月20日发(作者：)

微信⼩程序⾃定义⾳频组件，⾃定义滚动条，单曲循环，循环播放⼩程序⾃定义⾳频组件，带滚动条摘要：⾸先⾃定义⾳频组件，是因为产品有这样的需求，需要如下样式的⽽微信⼩程序API给我们提供的就是这样的⽽且产品需要⼩程序有后台播放功能，所以我们不考虑⼩程序的 audio 组件，即使官⽅推荐更强⼤的 InnerAudioContext 但是不符合需求，所以这⾥⽤到的是 backgroundAudioManager()分析⼀下：这个页⾯构成，主要就是进度条和⼀些icon，进度条之前我⾃定义了⼀版，但是效果不理想，最后重构了页⾯，所以这⾥⽤的就是 slider 滑动选择器 {{current_process}}

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}}" /> {{total_process}} 滑动事件 bindchange="hanle_slider_change"

开始滑动 bindtouchstart="handle_slider_move_start"

停⽌滑动 bindtouchend="handle_slider_move_end"

{ 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 *//** * @author: 清风⽩⽔ /luxiaoyao/ * @date: 2018/07/20 14:36:00 * @program: 重构⾳频页⾯ */const APP = getApp()const AUDIOMANAGER = getApp()._bac_audio_const AUDIO = getApp()._bac_audio_managerPage({ onLoad: function (e) { let that = this, request_param = { articleId: eId } a({ article_id: eId }) t({ url: 'your url', method: 'POST', data: {}, header: { 'Content-Type': 'application/json;text/html;charset=utf-8;'

}, success: (res) => { if ( == 'A00000') { (() => { setTimeout(() => { a({ is_loading: true }) }, 300) }) let response = ation // 如果不是从悬浮按钮播放，就重新赋值 if (eId == && _play) { ckgroundAudio({ position: () }) } else { audio_background_play(response) } // 置灰上⼀⾸下⼀⾸ if (icleId == 0) { a({ is_first_page: true }) } if (ticleId == 0) { a({ is_last_page: true }) } } } }) //背景⾳频播放进度更新事件 Update(() => { if (!_moving_slider) { a({ current_process: format(tTime), slider_value: (tTime), total_process: format(on), slider_max: (on) }) } = tTime }) // 背景⾳频播放完毕 d(() => { if (!_loop) { () } else { // 单曲循环 a({ slider_value: 0, current_process: '00:00', }) audio_background_play(response) } }) }, // 拖动进度条，到指定位置 hanle_slider_change(e) { const position = rrentAudio(position) }, // 拖动进度条控件 seekCurrentAudio(position) { // 更新进度条 let that = this ckgroundAudio({ position: (position), success: function () { tTime = position a({ current_process: format(position), slider_value: (position) }) } }) }, // 进度条滑动 handle_slider_move_start() { a({ is_moving_slider: true }); }, handle_slider_move_end() { a({ is_moving_slider: false }); }, // 点击播放暂停 audio_play: function () { let that = this if (_play) { a({ is_play: false }) ackgroundAudio() } else if (!_play && _ended) { // 这⾥是判断如果循环播放结束，没有下⼀⾸，重新播放 is_ended 是否是最后⼀⾸ audio_background_play(_article) a({ is_play: true, is_ended: false }) } else if(!_play){ a({ is_play: true }) ckgroundAudio() } _play = !_play }, // 点击是否循环 play_loop: function () { let that = this if (_loop) { a({ is_loop: false }) } else { a({ is_loop: true }) } },

// 上⼀⾸ prev: function () { let that = this if (_icleId != 0) { ctTo({ url: '/pages/audio_article/audio_article?articleId=' + _icleId }) } }, // 下⼀⾸ next: function () { let that = this if (_ticleId != 0) { ctTo({ url: '/pages/audio_article/audio_article?articleId=' + _ticleId }) } else { // 如果是最后⼀⾸ a({ is_play: false, slider_value: 0, current_process: '00:00', is_ended: true }) _play = false } }, onUnload: function () { // 动态切换悬浮按钮的动态 if (_play) { _active = true } else { _active = false } }

})// 时间格式化function format(t) { let time = (t / 60) >= 10 ? (t / 60) : '0' + (t / 60) t = time + ':' + ((t % 60) / 100).toFixed(2).slice(-2) return t}// ⾳频播放function audio_background_play(response) { = pressed ? pressed : ink // ⾳频的数据源，默认为空字符串，当设置了新的 src 时，会⾃动开始播放 ，⽬前⽀持的格式有 m4a, aac, mp3, wav = eName // ⾳频标题 = Name // 专辑名 = '****' // 歌⼿名 mgUrl = // 封⾯图url} globalData: { userInfo: null, global_bac_audio_manager: { manage: kgroundAudioManager(), is_play: false, id: '', play_time: '', article_id: '', } }总结： 在IOS端 背景⾳频播放必须设置title 才可以播放

2023年6月20日发(作者：)

微信⼩程序⾃定义⾳频组件，⾃定义滚动条，单曲循环，循环播放⼩程序⾃定义⾳频组件，带滚动条摘要：⾸先⾃定义⾳频组件，是因为产品有这样的需求，需要如下样式的⽽微信⼩程序API给我们提供的就是这样的⽽且产品需要⼩程序有后台播放功能，所以我们不考虑⼩程序的 audio 组件，即使官⽅推荐更强⼤的 InnerAudioContext 但是不符合需求，所以这⾥⽤到的是 backgroundAudioManager()分析⼀下：这个页⾯构成，主要就是进度条和⼀些icon，进度条之前我⾃定义了⼀版，但是效果不理想，最后重构了页⾯，所以这⾥⽤的就是 slider 滑动选择器 {{current_process}}

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}}" /> {{total_process}} 滑动事件 bindchange="hanle_slider_change"

开始滑动 bindtouchstart="handle_slider_move_start"

停⽌滑动 bindtouchend="handle_slider_move_end"

{ 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 *//** * @author: 清风⽩⽔ /luxiaoyao/ * @date: 2018/07/20 14:36:00 * @program: 重构⾳频页⾯ */const APP = getApp()const AUDIOMANAGER = getApp()._bac_audio_const AUDIO = getApp()._bac_audio_managerPage({ onLoad: function (e) { let that = this, request_param = { articleId: eId } a({ article_id: eId }) t({ url: 'your url', method: 'POST', data: {}, header: { 'Content-Type': 'application/json;text/html;charset=utf-8;'

}, success: (res) => { if ( == 'A00000') { (() => { setTimeout(() => { a({ is_loading: true }) }, 300) }) let response = ation // 如果不是从悬浮按钮播放，就重新赋值 if (eId == && _play) { ckgroundAudio({ position: () }) } else { audio_background_play(response) } // 置灰上⼀⾸下⼀⾸ if (icleId == 0) { a({ is_first_page: true }) } if (ticleId == 0) { a({ is_last_page: true }) } } } }) //背景⾳频播放进度更新事件 Update(() => { if (!_moving_slider) { a({ current_process: format(tTime), slider_value: (tTime), total_process: format(on), slider_max: (on) }) } = tTime }) // 背景⾳频播放完毕 d(() => { if (!_loop) { () } else { // 单曲循环 a({ slider_value: 0, current_process: '00:00', }) audio_background_play(response) } }) }, // 拖动进度条，到指定位置 hanle_slider_change(e) { const position = rrentAudio(position) }, // 拖动进度条控件 seekCurrentAudio(position) { // 更新进度条 let that = this ckgroundAudio({ position: (position), success: function () { tTime = position a({ current_process: format(position), slider_value: (position) }) } }) }, // 进度条滑动 handle_slider_move_start() { a({ is_moving_slider: true }); }, handle_slider_move_end() { a({ is_moving_slider: false }); }, // 点击播放暂停 audio_play: function () { let that = this if (_play) { a({ is_play: false }) ackgroundAudio() } else if (!_play && _ended) { // 这⾥是判断如果循环播放结束，没有下⼀⾸，重新播放 is_ended 是否是最后⼀⾸ audio_background_play(_article) a({ is_play: true, is_ended: false }) } else if(!_play){ a({ is_play: true }) ckgroundAudio() } _play = !_play }, // 点击是否循环 play_loop: function () { let that = this if (_loop) { a({ is_loop: false }) } else { a({ is_loop: true }) } },

// 上⼀⾸ prev: function () { let that = this if (_icleId != 0) { ctTo({ url: '/pages/audio_article/audio_article?articleId=' + _icleId }) } }, // 下⼀⾸ next: function () { let that = this if (_ticleId != 0) { ctTo({ url: '/pages/audio_article/audio_article?articleId=' + _ticleId }) } else { // 如果是最后⼀⾸ a({ is_play: false, slider_value: 0, current_process: '00:00', is_ended: true }) _play = false } }, onUnload: function () { // 动态切换悬浮按钮的动态 if (_play) { _active = true } else { _active = false } }

})// 时间格式化function format(t) { let time = (t / 60) >= 10 ? (t / 60) : '0' + (t / 60) t = time + ':' + ((t % 60) / 100).toFixed(2).slice(-2) return t}// ⾳频播放function audio_background_play(response) { = pressed ? pressed : ink // ⾳频的数据源，默认为空字符串，当设置了新的 src 时，会⾃动开始播放 ，⽬前⽀持的格式有 m4a, aac, mp3, wav = eName // ⾳频标题 = Name // 专辑名 = '****' // 歌⼿名 mgUrl = // 封⾯图url} globalData: { userInfo: null, global_bac_audio_manager: { manage: kgroundAudioManager(), is_play: false, id: '', play_time: '', article_id: '', } }总结： 在IOS端 背景⾳频播放必须设置title 才可以播放