vue怎么實現(xiàn)音樂/視頻播放進度條組件
這篇文章主要介紹“vue怎么實現(xiàn)音樂/視頻播放進度條組件”，在日常操作中，相信很多人在vue怎么實現(xiàn)音樂/視頻播放進度條組件問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”vue怎么實現(xiàn)音樂/視頻播放進度條組件”的疑惑有所幫助！接下來，請跟著小編一起來學(xué)習(xí)吧！
創(chuàng)新互聯(lián)建站專注為客戶提供全方位的互聯(lián)網(wǎng)綜合服務(wù)，包含不限于網(wǎng)站設(shè)計制作、成都做網(wǎng)站、土默特右旗網(wǎng)絡(luò)推廣、成都小程序開發(fā)、土默特右旗網(wǎng)絡(luò)營銷、土默特右旗企業(yè)策劃、土默特右旗品牌公關(guān)、搜索引擎seo、人物專訪、企業(yè)宣傳片、企業(yè)代運營等，從售前售中售后，我們都將竭誠為您服務(wù)，您的肯定，是我們最大的嘉獎；創(chuàng)新互聯(lián)建站為所有大學(xué)生創(chuàng)業(yè)者提供土默特右旗建站搭建服務(wù)，24小時服務(wù)熱線：18980820575，官方網(wǎng)址：chinadenli.net
需求分析：
①：進度條隨著歌曲的播放延長，歌曲播放完時長度等于黑色總進度條長度；時間實時更新。
②：當(dāng)滑動按鈕時，實時更新播放時間，橙色進度條長度也會隨著按鈕的滑動而改變，當(dāng)滑動結(jié)束時，橙色區(qū)域停留在滑動結(jié)束的位置，歌曲從當(dāng)前進度開始播放。
③：點擊進度條，橙色進度條長度變?yōu)辄c擊處至起點的長度，并從當(dāng)前點開始播放歌曲。
大概思路：
①：左邊的時間可以通過audio播放時派發(fā)的timeupdate事件獲取，右邊的時間為接口獲取的當(dāng)前歌曲的總時間。
②：進度條子組件的長度通過父組件傳入一個percent值計算，percent值為播放進度與總進度的比值。
③：進度條的滑動及點擊結(jié)束后，需要向父組件傳遞一個percent值，使用this.$emit()像父組件派發(fā)事件，父組件中設(shè)置事件響應(yīng)函數(shù)，接收percent參數(shù)值，用于改變audio中當(dāng)前播放的音樂進度。
詳細(xì)實現(xiàn)，關(guān)鍵代碼已經(jīng)注釋：
先上組件源碼：
<template>
<div class="progress-bar" ref="progressBar" @click="progressClick">
<div class="bar-inner">
<div class="progress" ref="progress"></div>
<div class="progress-btn-wrapper"ref="progressBtn"
@touchstart.prevent = "progressTouchStart"
@touchmove.prevent = "progressTouchMove"
@touchend = "progressTouchEnd"
>
<div class="progress-btn"></div>
</div>
</div>
</div>
</template>
<script type="text/ecmascript-6">
// 進度條按鈕寬度,由于style中沒有設(shè)置width,因此只能用clientWidth獲取
export default {
data() {
return {
btnWidth: {
type: Number,
default: 0
},
touchInfo: {
initiated: false
}
}
},
props: {
percent: {
type: Number,
default: 0
}
},
mounted() {
this.btnWidth = document.getElementsByClassName('progress-btn')[0].clientWidth
},
methods: {
// 點擊按鈕
progressTouchStart(e) {
// 記錄touch事件已經(jīng)初始化
this.touchInfo.initiated = true
// 點擊位置
this.touchInfo.startX = e.touches[0].pageX
// 點擊時進度條長度
this.touchInfo.left = this.$refs.progress.clientWidth
},
// 開始移動
progressTouchMove(e) {
if (!this.touchInfo.initiated) {
return
}
// 計算移動距離
const moveX = e.touches[0].pageX - this.touchInfo.startX
// 設(shè)置偏移值
const offsetWidth = Math.min(Math.max(0, this.touchInfo.left + moveX),
this.$refs.progressBar.clientWidth - this.btnWidth)
this._setOffset(offsetWidth)
},
// 移動結(jié)束
progressTouchEnd(e) {
this.touchInfo.initiated = false
// 向父組件派發(fā)事件,傳遞當(dāng)前百分比值
this._triggerPercent()
},
// 進度條點擊事件
progressClick(e) {
console.log('clikc')
// 設(shè)置進度條及按鈕偏移
this._setOffset(e.offsetX)
// 通知父組件播放進度變化
this._triggerPercent()
},
_triggerPercent() {
const barWidth = this.$refs.progressBar.clientWidth - this.btnWidth
const percent = Math.min(1, this.$refs.progress.clientWidth / barWidth)
this.$emit('percentChange', percent)
},
// 設(shè)置偏移
_setOffset(offsetWidth) {
// 設(shè)置進度長度隨著百分比變化
this.$refs.progress.style.width = `${offsetWidth}px`
// 設(shè)置按鈕隨著百分比偏移
this.$refs.progressBtn.style.transform = `translate3d(${offsetWidth}px, 0, 0)`
}
},
watch: {
// 監(jiān)聽歌曲播放百分比變化
percent(newPercent, oldPercent) {
if (newPercent > 0 && !this.touchInfo.initiated) {
// 進度條總長度
const barWidth = this.$refs.progressBar.clientWidth - this.btnWidth
const offsetWidth = barWidth * newPercent
// 設(shè)置進度條及按鈕偏移
this._setOffset(offsetWidth)
}
}
}
}
</script>
<style lang="stylus" rel="stylesheet/stylus">
@import "~common/stylus/variable.styl"
.progress-bar
height 0.5rem
.bar-inner
position relative
top 0.2rem
height 0.08rem
background rgba(0, 0, 0, 0.3)
.progress
position absolute
height 100%
background $color-theme
.progress-btn-wrapper
position absolute
left -0.25rem
top -0.25rem
width 0.5rem
height 0.5rem
.progress-btn
position relative
top 0.12rem
left 0.12rem
box-sizing border-box
width 0.32rem
height 0.32rem
border 0.06rem solid $color-text
border-radius 50%
background $color-theme
</style>此為progerss-bar.vue組件源碼，組件所需要父組件傳入的值只有一個“percent”，為父組件中audio當(dāng)前播放時間與總時間的比值，用于計算此組件中橙色進度條的長度。
組件的使用：
首先導(dǎo)入并注冊組件（在此不做解釋），隨后使用此組件，dom：
<div class="progress-wrapper">
<span class="time time-l">{{formatTime(currentTime)}}</span>
<div class="progress-bar-wrapper">
<progress-bar :percent="percent" @percentChange="setProgress"></progress-bar>
</div>
<span class="time time-r">{{formatTime(currentSong.duration)}}</span>
</div>解釋：兩個span為左右兩個時間值，progress-bar為調(diào)用的組件，需要傳入percent值，用于子組件設(shè)置進度條長度
percent值來自于audio的currenTime與歌曲總長度的比值：
// 計算百分比
percent() {
return Math.min(1, this.currentTime / this.currentSong.duration)
}@percentChange為子組件中派發(fā)過來的事件，詳細(xì)請看子組件中源碼及注釋“_triggerPercent()”部分，此事件調(diào)用的方法用于接收子組件傳過來的拖動按鈕、點擊進度條改變歌曲播放進度后的播放百分比，用于改變父組件中audio標(biāo)簽的currentTime，進而將歌曲播放進度設(shè)置為當(dāng)前時間。
以下為父組件中，接收到子組件派發(fā)過來的事件后調(diào)用的函數(shù)。
// 設(shè)置進度
setProgress(percent) {
// 根據(jù)子組件傳過來的百分比設(shè)置播放進度
this.$refs.audio.currentTime = this.currentSong.duration * percent
// 拖動后設(shè)置歌曲播放
if (!this.playing) {
this.togglePlaying()
}
},樣式（本人使用stylus）：
.progress-wrapper display flex .time font-size 0.24rem &.time-l position absolute bottom 1.62rem left 1rem &.time-r position absolute bottom 1.62rem right 1rem .progress-bar-wrapper position absolute bottom 1.5rem left 1.7rem width 4.2rem
到此，關(guān)于“vue怎么實現(xiàn)音樂/視頻播放進度條組件”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識，請繼續(xù)關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編會繼續(xù)努力為大家?guī)砀鄬嵱玫奈恼拢?/p>
網(wǎng)頁名稱：vue怎么實現(xiàn)音樂/視頻播放進度條組件
網(wǎng)站網(wǎng)址：http://chinadenli.net/article10/ppdsgo.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供外貿(mào)網(wǎng)站建設(shè)、搜索引擎優(yōu)化、網(wǎng)站營銷、網(wǎng)站排名、網(wǎng)站導(dǎo)航、網(wǎng)站設(shè)計公司
聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)
- 什么是軟件開發(fā)中的過度設(shè)計？ 2016-09-06
- 河口區(qū)APP軟件開發(fā)需要多少錢？ 2020-12-16
- 2019 年軟件開發(fā)新趨勢必知！ 2019-08-07
- 成都物流軟件開發(fā)該注意哪些問題？ 2022-06-08
- 蘭州生活服務(wù)業(yè)APP軟件開發(fā)的重要性 2023-02-09
- 作為四年的軟件開發(fā)人員，五個重要經(jīng)驗教訓(xùn) 2021-05-22
- 類似轉(zhuǎn)轉(zhuǎn)APP軟件開發(fā) 2022-06-14
- 學(xué)軟件開發(fā)很難嗎？大神帶你快速學(xué)會數(shù)據(jù)結(jié)構(gòu)與算法！ 2016-08-30
- 軟件開發(fā)選什么語言比較好呢？ 2016-08-12
- 上海理財APP軟件開發(fā)需要多少錢？ 2020-11-29
- 青島app軟件開發(fā)需要多長時間？ 2023-02-12
- 軟件開發(fā)課堂：智能語音能代替人嗎？ 2021-06-03