如何使用vue3+uni-app封裝音樂(lè)播放插件

1、初始化一個(gè)音樂(lè)實(shí)例
let AUDIO = ''
export const initAudio = function (url) {
AUDIO = uni.createInnerAudioContext()
AUDIO.src = url
return AUDIO
}
2、將這個(gè)初始化的方法添加到全局
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的總數(shù)是100 通過(guò)value控制進(jìn)度條進(jìn)度 直到最后19/19*100就是進(jìn)度條滿了 強(qiáng)行進(jìn)度條總數(shù)規(guī)定成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、調(diào)用我們放在全局的init方法
import { reactive, onMounted, getCurrentInstance } from 'vue'
const { proxy } = getCurrentInstance() as any通過(guò)proxy 可以在vue3中那個(gè)我們配置在全局的方法
let a = proxy.initAudio('音頻地址')此時(shí)a就是我們獲取到的音頻實(shí)例,并且設(shè)置了我們需要播放的音頻鏈接
5、接下來(lái)就是我們可能用到的一些API的介紹
| startTime | 開(kāi)始播放的位置 |
| autoplay | 是否自動(dòng)開(kāi)始播放,默認(rèn)為false |
| loop | 是否循環(huán)播放,默認(rèn)為false |
| duration | 當(dāng)前音頻的長(zhǎng)度是通過(guò)src中音頻返回的,需要在onCanplay中獲取 |
| currentTime | 當(dāng)前音頻的播放位置 |
| paused | 當(dāng)前是否為暫停或停止?fàn)顟B(tài) true為暫?;蛲V?,false表示正在播放 |
6、需要使用到的方法
| play | 播放 |
| pause | 暫停 |
| seek | 跳轉(zhuǎn)到指定位置 s |
| onCanplay | 音頻可以進(jìn)入播放狀態(tài) |
| stop | 停止 |
7、創(chuàng)建音頻
這一步設(shè)置一些關(guān)于播放的配置,例如是否自動(dòng)播放,但是最重要的是獲取我們時(shí)長(zhǎng),但是我在使用的時(shí)候發(fā)現(xiàn)直接獲取duration的時(shí)候無(wú)法成功獲取到,通過(guò)百度發(fā)現(xiàn)了下面的方法,通過(guò)設(shè)置定時(shí)器。
// 創(chuàng)建音頻
const createAudio = function () {
a.autoplay = false
a.onCanplay(() => {
let intervalID = setInterval(function () {
if (a.duration !== 0) {
console.log(a.duration, '測(cè)試')
// 設(shè)置總時(shí)長(zhǎng)
data.totalTime = formatTime(a.duration)
data.trueTime = a.duration
clearInterval(intervalID)
}
}, 500)
})
}因?yàn)橐魳?lè)播放時(shí)長(zhǎng)的展示形式一般為 00:00 形式的,而我們獲取的時(shí)長(zhǎng)是以s為單位結(jié)束的所以還需要將時(shí)間進(jìn)行格式化處理
// 格式化時(shí)間 ---- (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、完成播放和暫停功能
定義一個(gè)方法用于控制音頻的播放和暫停,isPlay是用于控制我們按鈕切換的狀態(tài),playTime就是當(dāng)前播放時(shí)長(zhǎng),trueTime也是總時(shí)長(zhǎng)
// 播放和暫停
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(() => {
// 播放時(shí)長(zhǎng)
data.playTime += 1
// 播放時(shí)長(zhǎng)超過(guò)總時(shí)長(zhǎng)(秒 )
if (data.playTime >= data.trueTime) {
// 不循環(huán)播放
a.stop()
data.isPlay = false
data.playTime = 0
clearInterval(data.timeupdata)
// 循環(huán)播放
// this.isPlay = false
// this.playTime = 0
// clearInterval(this.timeupdata)
// this.playAudio()
}
}, 1000)
a.play()
data.isPlay = !data.isPlay
}
}9、進(jìn)度條設(shè)置
直接使用uni-app的內(nèi)置組件slider就可以實(shí)現(xiàn)進(jìn)度條的效果
slider的value屬性需要傳的是數(shù)字,進(jìn)度條的最大值為100
我們可以使用(data.playTime / data.trueTime) * 100 計(jì)算當(dāng)前的時(shí)長(zhǎng)
就是相當(dāng)于將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" />
通過(guò)sidler的change的方法控制進(jìn)度條的拖動(dòng),并且改變音樂(lè)的進(jìn)度
這里的second將就是將總時(shí)長(zhǎng)播放到百分之幾賦值給second
// 控制進(jìn)度條
const sliderChange = function (e: any) {
console.log('value 發(fā)生變化:' + e.detail.value)
// 直到進(jìn)度條到達(dá)100的時(shí)候才能獲得總時(shí)長(zhǎng)
const second = (e.detail.value / 100) * data.trueTime
data.playTime = second
// 跳轉(zhuǎn)到某一秒
a.seek(second)
}總結(jié)
到此這篇關(guān)于如何使用vue3+uni-app封裝音樂(lè)播放插件的文章就介紹到這了,更多相關(guān)vue3 uni-app封裝音樂(lè)播放插件內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
Vue POST請(qǐng)求頭'Content-Type':'application/j
這篇文章主要介紹了Vue POST請(qǐng)求頭'Content-Type':'application/json;',data上傳過(guò)程,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
Vue結(jié)合ElementUI上傳Base64編碼后的圖片實(shí)例
這篇文章主要介紹了Vue結(jié)合ElementUI上傳Base64編碼后的圖片實(shí)例,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-04-04
如何實(shí)現(xiàn)雙向綁定mvvm的原理實(shí)現(xiàn)
這篇文章主要介紹了vue雙向數(shù)據(jù)綁定原理,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
Vue SPA 路由跳轉(zhuǎn)無(wú)法回到頂部問(wèn)題排查與解決
本文主要介紹一下Vue SPA 路由跳轉(zhuǎn)無(wú)法回到頂部問(wèn)題排查與解決,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2025-06-06
監(jiān)聽(tīng)element-ui table滾動(dòng)事件的方法
這篇文章主要介紹了監(jiān)聽(tīng)element-ui table滾動(dòng)事件的方法,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-03-03
Vue自定義指令上報(bào)Google Analytics事件統(tǒng)計(jì)的方法
我們經(jīng)常需要接入統(tǒng)計(jì)服務(wù)以方便運(yùn)營(yíng),這篇文章主要介紹了Vue自定義指令上報(bào)Google Analytics事件統(tǒng)計(jì)的方法,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-02-02
vue-extend和vue-component注冊(cè)一個(gè)全局組件方式
這篇文章主要介紹了vue-extend和vue-component注冊(cè)一個(gè)全局組件方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-11-11

