欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時(shí)間：2023年11月22日 15:12:28   作者：Destinynever  
UniApp是一個(gè)基于Vue.js開發(fā)的跨平臺(tái)應(yīng)用開發(fā)框架,它可以使用一套代碼同時(shí)構(gòu)建iOS、Android和Web應(yīng)用,這篇文章主要給大家介紹了關(guān)于如何使用vue3+uni-app封裝音樂播放插件的相關(guān)資料,需要的朋友可以參考下

1、初始化一個(gè)音樂實(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  通過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

通過proxy 可以在vue3中那個(gè)我們配置在全局的方法

let a = proxy.initAudio('音頻地址')

此時(shí)a就是我們獲取到的音頻實(shí)例，并且設(shè)置了我們需要播放的音頻鏈接

5、接下來就是我們可能用到的一些API的介紹

startTime                開始播放的位置
autoplay      是否自動(dòng)開始播放，默認(rèn)為false
loop是否循環(huán)播放，默認(rèn)為false
duration                當(dāng)前音頻的長(zhǎng)度是通過src中音頻返回的，需要在onCanplay中獲取
currentTime       當(dāng)前音頻的播放位置
paused當(dāng)前是否為暫?；蛲Ｖ?fàn)顟B(tài) true為暫?；蛲Ｖ梗琭alse表示正在播放

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í)候無法成功獲取到，通過百度發(fā)現(xiàn)了下面的方法，通過設(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)橐魳凡シ艜r(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)超過總時(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" />

通過sidler的change的方法控制進(jìn)度條的拖動(dòng)，并且改變音樂的進(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封裝音樂播放插件的文章就介紹到這了,更多相關(guān)vue3 uni-app封裝音樂播放插件內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

最新評(píng)論