前言：前面有一篇写了小程序的自定义播放器，这次找到了小程序官方的播放器，下面是demo
需求：实现文字转语音的功能，现有的audio播放器组件，样式不满足需要，这次的完善是直接使用微信的 【音频背景】api实现的，话不多说，直接看效果图（真机调试效果）
--------------------------播放器效果如下--------------------------
上代码（wepy框架）
这次的代码是直接用小程序框架实现的，可能无法直接运行，最底下还有原生的小程序代码，实质都是一样的噢，
关键还是wx.getBackgroundAudioManager()
<template>
<view class="article-audio-page">
<button @tap="play">播放</button>
</view>
</template>
<script>
import wepy from 'wepy'
const backgroundAudioManager = wx.getBackgroundAudioManager() // 背景音乐
let updateInterval
export default class Audio extends wepy.page {
config = {
navigationBarTitleText: ''
}
data = {
IMAGE_URL_V2,
theme: 'light',
playing: false, // 播放状态
pfause: false,
playTime: 0, // 播放时长
formatedPlayTime: '00:00:00' // 格式化后的播放时长
}
methods = {
play() {
backgroundAudioManager.title = '此时此刻' // 必填
backgroundAudioManager.epname = '此时此刻' // 必填
backgroundAudioManager.coverImgUrl = 'http://y.gtimg.cn/music/photo_new/T002R300x300M000003rsKF44GyaSk.jpg?max_age=2592000'
const that = this
if (that.data.pause) {
backgroundAudioManager.play()
this.setData({
playing: true,
})
} else {
that.setData({
playing: true,
}, () => {
// 设置src后会自动播放
backgroundAudioManager.src = 'https://dldir1.qq.com/music/release/upload/t_mm_file_publish/2339610.m4a'
})
}
},
seek(e) {
backgroundAudioManager.seek(e.detail.value)
},
pause() {
clearInterval(updateInterval)
backgroundAudioManager.pause()
},
stop() {
clearInterval(updateInterval)
backgroundAudioManager.stop()
},
}
formatTime(time) {
if (typeof time !== 'number' || time < 0) {
return time
}
const hour = parseInt(time / 3600, 10)
time %= 3600
const minute = parseInt(time / 60, 10)
time = parseInt(time % 60, 10)
const second = time
return ([hour, minute, second]).map(function (n) {
n = n.toString()
return n[1] ? n : '0' + n
}).join(':')
}
_enableInterval() {
const that = this
function update() {
that.setData({
playTime: backgroundAudioManager.currentTime + 1,
formatedPlayTime: that.formatTime(backgroundAudioManager.currentTime + 1)
})
}
updateInterval = setInterval(update, 1000)
}
onLoad (e) {
console.log('传入的is_voice',e.is_voice)
console.log('传入的voice_url',e.voice_url)
this.theme = wx.getSystemInfoSync().theme || 'light'
if (wx.onThemeChange) {
wx.onThemeChange(({
theme
}) => {
this.setData({
theme
})
})
}
const that = this
// 监听播放事件
backgroundAudioManager.onPlay(() => {
// 刷新播放时间
that._enableInterval()
that.setData({
pause: false,
})
})
// 监听暂停事件
backgroundAudioManager.onPause(() => {
clearInterval(updateInterval)
that.setData({
playing: false,
pause: true,
})
})
backgroundAudioManager.onEnded(() => {
clearInterval(updateInterval)
that.setData({
playing: false,
playTime: 0,
formatedPlayTime: that.formatTime(0)
})
})
backgroundAudioManager.onStop(() => {
clearInterval(updateInterval)
that.setData({
playing: false,
playTime: 0,
formatedPlayTime: that.formatTime(0)
})
})
}
onUnload () {
clearInterval(updateInterval)
}
onShow () {
if (!backgroundAudioManager.paused && backgroundAudioManager.paused !== undefined) {
this._enableInterval()
this.setData({
playing: true
})
}
}
}
</script>
继续上代码（原生微信小程序）
wxml:
<view class="page-body-button" bindtap="play">
<button>播放</button>
</view>
js:
// const app = getApp()
const backgroundAudioManager = wx.getBackgroundAudioManager()
let updateInterval
Page({
formatTime(time) {
if (typeof time !== 'number' || time < 0) {
return time
}
const hour = parseInt(time / 3600, 10)
time %= 3600
const minute = parseInt(time / 60, 10)
time = parseInt(time % 60, 10)
const second = time
return ([hour, minute, second]).map(function (n) {
n = n.toString()
return n[1] ? n : '0' + n
}).join(':')
},
onShow() {
if (!backgroundAudioManager.paused && backgroundAudioManager.paused !== undefined) {
this._enableInterval()
this.setData({
playing: true
})
}
},
data: {
theme: 'light',
playing: false, // 播放状态
pause: false,
playTime: 0, // 播放时长
formatedPlayTime: '00:00:00' // 格式化后的播放时长
},
play() {
backgroundAudioManager.title = '此时此刻' // 必填
backgroundAudioManager.epname = '此时此刻' // 必填
// backgroundAudioManager.singer = '许巍' //
backgroundAudioManager.coverImgUrl = 'http://y.gtimg.cn/music/photo_new/T002R300x300M000003rsKF44GyaSk.jpg?max_age=2592000'
const that = this
if (that.data.pause) {
backgroundAudioManager.play()
this.setData({
playing: true,
})
} else {
that.setData({
playing: true,
}, () => {
// 设置src后会自动播放
backgroundAudioManager.src = 'https://dldir1.qq.com/music/release/upload/t_mm_file_publish/2339610.m4a'
})
}
},
seek(e) {
backgroundAudioManager.seek(e.detail.value)
},
pause() {
clearInterval(updateInterval)
backgroundAudioManager.pause()
},
stop() {
clearInterval(updateInterval)
backgroundAudioManager.stop()
},
_enableInterval() {
const that = this
function update() {
that.setData({
playTime: backgroundAudioManager.currentTime + 1,
formatedPlayTime: that.formatTime(backgroundAudioManager.currentTime + 1)
})
}
updateInterval = setInterval(update, 1000)
},
onUnload() {
clearInterval(updateInterval)
},
onLoad() {
this.setData({
theme: wx.getSystemInfoSync().theme || 'light'
})
if (wx.onThemeChange) {
wx.onThemeChange(({
theme
}) => {
this.setData({
theme
})
})
}
const that = this
// 监听播放事件
backgroundAudioManager.onPlay(() => {
// 刷新播放时间
that._enableInterval()
that.setData({
pause: false,
})
})
// 监听暂停事件
backgroundAudioManager.onPause(() => {
clearInterval(updateInterval)
that.setData({
playing: false,
pause: true,
})
})
backgroundAudioManager.onEnded(() => {
clearInterval(updateInterval)
that.setData({
playing: false,
playTime: 0,
formatedPlayTime: that.formatTime(0)
})
})
backgroundAudioManager.onStop(() => {
clearInterval(updateInterval)
that.setData({
playing: false,
playTime: 0,
formatedPlayTime: that.formatTime(0)
})
})
},
})
参考的微信官方文档API就是下面这个噢
链接我就放这里啦 微信小程序官方文档
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
