由于微信小程序官方将音频的样式固定死了,往往再工作中和UI设计师设计出来的样式不符,故一般都采用背景音频播放来实现自定义的UI样式的音频播放,即使用官网API提供的BackgroundAudioManager进行操作 也可以去官网https://developers.weixin.qq.com/miniprogram/dev/api/media/background-audio/BackgroundAudioManager.play.html查看详情第一步,在对应的wxml页面添加如下代码,eg,放在index.wxml中<view class=’audioMeaage’> <view bindtap=’playAudio1′> <image wx:if=”{{!audioImg}}” class=’playIcom’ src='{{palyIcon}}’></image> <image wx:else class=’playIcom’ src='{{pausIcon}}’></image> </view> <view class=’sliderWrap’> <view class=’audioNames’>{{audioTitle}}</view> <view class=’progressWrap’> <slider class=”slider2″ bindchange=”hanle_slider_change” bindtouchstart=”handle_slider_move_start” bindtouchend=”handle_slider_move_end” min=”0″ block-size=”10″ max=”{{slider_max}}” activeColor=”#ffd038″ block-color=”#ffd038″ backgroundColor=”#f2f2f2″ value=”{{slider_value}}” /> <view class=’proTime’>{{current_process}}/{{total_process}}</view> </view> </view> </view>第二步,对应的index.js,注意这里的playAudio方法是点击以后从后台获取音频的url和标题等信息的//获取应用实例const app = getApp()const AUDIOMANAGER = getApp().globalData.global_bac_audio_manager.manageconst AUDIO = getApp().globalData.global_bac_audio_managerPage({ data: { audioImg:false, palyIcon: “./../../images/home_img_vedio_play.png”, pausIcon:”./../../images/home_img_vedio_play2.png”, audioFlag: false, is_moving_slider: false, current_process:””, slider_value: “”, total_process: “”, slider_max: “”, audioTitle:””, }, playAudio: function(e){ const item = e.currentTarget.dataset.url AUDIOMANAGER.src = item.link_url AUDIOMANAGER.title = item.tit // 音频标题 AUDIO.is_play= true //背景音频播放进度更新事件 const that = this that.setData({ audioFlag: true, audioTitle: item.tit, audioImg: true }) AUDIOMANAGER.onTimeUpdate(() => { if (!that.data.is_moving_slider) { that.setData({ current_process: that.format(AUDIOMANAGER.currentTime), slider_value: Math.floor(AUDIOMANAGER.currentTime), total_process: that.format(AUDIOMANAGER.duration), slider_max: Math.floor(AUDIOMANAGER.duration) }) } AUDIO.time = AUDIOMANAGER.currentTime }) // 背景音频播放完毕 AUDIOMANAGER.onEnded(() => { // 单曲循环 that.setData({ slider_value: 0, current_process: ’00:00′, total_process: that.format(AUDIOMANAGER.duration) }) }) }, // 拖动进度条,到指定位置 hanle_slider_change(e) { const position = e.detail.value this.seekCurrentAudio(position) }, // 拖动进度条控件 seekCurrentAudio(position) { // 更新进度条 let that = this wx.seekBackgroundAudio({ position: Math.floor(position), success: function () { AUDIOMANAGER.currentTime = position that.setData({ current_process: that.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 }); }, // 时间格式化 format: function(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 }, // 播放音频 playAudio1: function(){ console.log(9799875) console.log(AUDIO.is_play) if(AUDIO.is_play) { AUDIOMANAGER.pause() AUDIO.is_play = false this.setData({ audioImg: false }) } else { AUDIOMANAGER.play() AUDIO.is_play = true this.setData({ audioImg: true }) } },})第三步,由于index.js里引入了app.js的方法或者属性了,其实就是将AUDIO的方法提出来了,放在了一个公用的里面,自己单独建立公用文件或者直接写在app.js里都是可以的,这里将其放在app.js中,可以对应这修改globalData里的属性globalData: { userInfo: null, global_bac_audio_manager: { manage: wx.getBackgroundAudioManager(), is_play: false, id: ”, play_time: ”, article_id: ”, } } index.wxss.audioMeaage{ height: 124rpx; display: flex; align-items: center;}.proTime{ font-size: 20rpx; color: #888888;}.progressWrap{ display: flex; align-items: center;}.playIcom{ width: 84rpx; height: 84rpx;}.slider{ /* width: 502rpx; */ }.slider1{ width: 466rpx; margin:0 29rpx 0 8rpx;}.slider2{ width: 466rpx; margin:0 29rpx 0 19rpx;} 微信小程序
微信小程序音频背景播放
未经允许不得转载:E企盈小程序开发-热线:4006-838-530 » 微信小程序音频背景播放
最新评论
不错的小程序案例
优秀的团队,不错的服务!
讲的很好
主播长的帅气
好系统好服务
优秀的团队
好服务,值得信赖
不错的服务