如何使用vue3+uni-app封装音乐播放插件
作者：Destinynever
UniApp是一个基于Vue.js开发的跨平台应用开发框架,它可以使用一套代码同时构建iOS、Android和Web应用,这篇文章主要给大家介绍了关于如何使用vue3+uni-app封装音乐播放插件的相关资料,需要的朋友可以参考下
1、初始化一个音乐实例
let AUDIO = ''
export const initAudio = function (url) {
AUDIO = uni.createInnerAudioContext()
AUDIO.src = url
return AUDIO
}
2、将这个初始化的方法添加到全局
app.config.globalProperties.initAudio = initAudio // main.ts/js 文件中
3、封装组件写好样式
<view class="audio-play">
<view class="audio-background"></view>
<img class="controls" @click="playAudio" :src="data.isPlay ? data.pauseIcon : data.playIcon" alt="" />
<view class="progress-container">
<view class="playTime">{{ formatTime(data.playTime) }}</view>
<!-- value的总数是100 通过value控制进度条进度 直到最后19/19*100就是进度条满了 强行进度条总数规定成100 -->
<slider class="progress" block-size="10" block-color="#69bfbe" activeColor="#ffffff" backgroundColor="#119b9a" :value="(data.playTime / data.trueTime) * 100" @change="sliderChange" />
<view class="totalTime">{{ data.totalTime }}</view>
</view>
</view>4、调用我们放在全局的init方法
import { reactive, onMounted, getCurrentInstance } from 'vue'
const { proxy } = getCurrentInstance() as any通过proxy 可以在vue3中那个我们配置在全局的方法
let a = proxy.initAudio('音频地址')此时a就是我们获取到的音频实例，并且设置了我们需要播放的音频链接
5、接下来就是我们可能用到的一些API的介绍
| startTime | 开始播放的位置 |
| autoplay | 是否自动开始播放，默认为false |
| loop | 是否循环播放，默认为false |
| duration | 当前音频的长度是通过src中音频返回的，需要在onCanplay中获取 |
| currentTime | 当前音频的播放位置 |
| paused | 当前是否为暂停或停止状态 true为暂停或停止，false表示正在播放 |
6、需要使用到的方法
| play | 播放 |
| pause | 暂停 |
| seek | 跳转到指定位置 s |
| onCanplay | 音频可以进入播放状态 |
| stop | 停止 |
7、创建音频
这一步设置一些关于播放的配置，例如是否自动播放，但是最重要的是获取我们时长，但是我在使用的时候发现直接获取duration的时候无法成功获取到，通过百度发现了下面的方法，通过设置定时器。
// 创建音频
const createAudio = function () {
a.autoplay = false
a.onCanplay(() => {
let intervalID = setInterval(function () {
if (a.duration !== 0) {
console.log(a.duration, '测试')
// 设置总时长
data.totalTime = formatTime(a.duration)
data.trueTime = a.duration
clearInterval(intervalID)
}
}, 500)
})
}因为音乐播放时长的展示形式一般为 00:00 形式的，而我们获取的时长是以s为单位结束的所以还需要将时间进行格式化处理
// 格式化时间 ---- (00:00的格式)
const formatTime = function (data: any) {
let minute = ''
let second = ''
minute = `${Math.floor(data / 60)}`
second = `${Math.floor(data % 60)}`
if (minute.toString().length === 1) minute = `0${minute}`
if (second.toString().length === 1) second = `0${second}`
return `${minute}:${second}`
}8、完成播放和暂停功能
定义一个方法用于控制音频的播放和暂停，isPlay是用于控制我们按钮切换的状态，playTime就是当前播放时长，trueTime也是总时长
// 播放和暂停
const playAudio = function () {
if (data.isPlay) {
if (data.trueTime > 0) {
console.log('暂停')
clearInterval(data.timeupdata)
a.pause()
data.isPlay = !data.isPlay
}
} else {
console.log('播放')
data.timeupdata = setInterval(() => {
// 播放时长
data.playTime += 1
// 播放时长超过总时长（秒 ）
if (data.playTime >= data.trueTime) {
// 不循环播放
a.stop()
data.isPlay = false
data.playTime = 0
clearInterval(data.timeupdata)
// 循环播放
// this.isPlay = false
// this.playTime = 0
// clearInterval(this.timeupdata)
// this.playAudio()
}
}, 1000)
a.play()
data.isPlay = !data.isPlay
}
}9、进度条设置
直接使用uni-app的内置组件slider就可以实现进度条的效果
slider的value属性需要传的是数字，进度条的最大值为100
我们可以使用(data.playTime / data.trueTime) * 100 计算当前的时长
就是相当于将data.trueTime分成data.trueTime等份
<slider class="progress" block-size="10" block-color="#ffb218" activeColor="#ffffff" backgroundColor="#d27e4a" :value="(data.playTime / data.trueTime) * 100" @change="sliderChange" />
通过sidler的change的方法控制进度条的拖动，并且改变音乐的进度
这里的second将就是将总时长播放到百分之几赋值给second
// 控制进度条
const sliderChange = function (e: any) {
console.log('value 发生变化：' + e.detail.value)
// 直到进度条到达100的时候才能获得总时长
const second = (e.detail.value / 100) * data.trueTime
data.playTime = second
// 跳转到某一秒
a.seek(second)
}总结
到此这篇关于如何使用vue3+uni-app封装音乐播放插件的文章就介绍到这了,更多相关vue3 uni-app封装音乐播放插件内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！