微信小程序音频背景播放
第一步，在对应的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;}
文章转载：http://www.gehut.cn/
赞 (0)