簡易音樂播放器。
阿新 • • 發佈:2018-12-11
<template>
<div class="player-box" :style="{height: `${height}px`}">
<div class="palyer-cover">
<mt-swipe :auto="3000" :showIndicators="false">
<mt-swipe-item v-for="(item, i) in swipper" :key="i">
<img :src="item" alt="封面圖">
</mt-swipe-item>
</mt-swipe>
</div>
<div class="palyer-music clearfix">
<!-- 播放按鈕 -->
<div class="play-btn" @click.stop="handleStart">
<img src="../../assets/images/ [email protected]" alt="" v-if="start">
<img src="../../assets/images/[email protected]" alt="" v-else>
</div>
<!-- 進度條 -->
<div class="progress-box" ref="progress" @click="handleProgress($event)">
<div class="progress-bg"></div>
<div class="progress-bar" ref="percent" :style="{width:`${Number(progress*100).toFixed(2) >=100 ? 100 : Number(progress*100).toFixed(2)}%`}">
<span class="progress-lot" ref="inner" @mousedown.prevent.stop="handleBarDown($event)" @touchstart.prevent.stop="handleBarDown($event)"></span>
</div>
</div>
<!-- 時間 -->
<div class="palyer-time">
{{`0${currentTime >=60 ? parseInt(currentTime/60) : '0'}:${(currentTime%60 >= 10 ? currentTime%60 : `0${currentTime%60}`)}`}}/{{`0${parseInt(longTime/60)}:${longTime%60}`}}
</div>
<audio id="player" preload>
<source :src="mv.mp3">
</audio>
</div>
</div>
</template>
<script>
import { Swipe, SwipeItem } from 'mint-ui';
import banner1 from '@/assets/images/1.jpg'
import banner2 from '@/assets/images/2.jpg'
import banner3 from '@/assets/images/3.jpg'
import banner4 from '@/assets/images/4.jpg'
import banner5 from '@/assets/images/5.jpg'
import mv from '@/assets/mp3/mp.mp3'
export default {
data () {
return {
start: false, //定義播放按鈕是顯示播放還是暫停 false表示暫停 true表示播放
longTime: 0, //定義音訊的總時長
currentTime: 0, //當前播放時間
progress: 0, //進度條寬度
height: 2 * document.body.clientWidth - document.body.offsetWidth,
move: {
status: false, // 是否可拖動
startX: 0, // 記錄最開始點選的X座標
left: 0, // 記錄當前已經移動的距離
},
mv: mv,
swipper: [
banner1,
banner2,
banner3,
banner4,
banner5
]
}
},
components: {
[Swipe.name]: Swipe,
[SwipeItem.name]: SwipeItem
},
mounted () {
let _self = this
window.onresize = () => {
this.height = 2 * document.body.clientWidth - document.body.offsetWidth
}
this.bindEvents()
let player = document.querySelector('#player')
player.load()
// 播放器載入完成 沒有播放時獲取音訊的時長
player.oncanplay = function () {
_self.longTime = parseInt(this.duration)
}
// 監聽播放進度
player.addEventListener('timeupdate', function () {
_self.currentTime = parseInt(this.currentTime)
_self.progress = _self.longTime === 0 ? 0 : this.currentTime / _self.longTime
})
},
methods: {
//新增繫結事件
bindEvents () {
document.addEventListener('mousemove', this.handleBarMove);
document.addEventListener('mouseup', this.handleBarUp);
document.addEventListener('touchmove', this.handleBarMove);
document.addEventListener('touchend', this.handleBarUp)
},
// 開始 暫停播放
handleStart () {
let player = document.querySelector('#player')
this.start = !this.start
this.start ? player.play() : player.pause()
},
// 點選進度條事件
handleProgress (e) {
let player = document.querySelector('#player')
let rect = this.$refs.progress.getBoundingClientRect()
let progressWidth = this.$refs.progress.clientWidth
let clickX = e.clientX - rect.left
this.progress = clickX / progressWidth
this.start = true
player.currentTime = this.progress * this.longTime
player.play()
},
// 滑鼠按下事件
handleBarDown (e) {
this.move.status = true;
this.move.startX = e.clientX || e.touches[0].pageX;
this.move.left = this.$refs.inner.clientWidth
},
//滑鼠/觸控移動事件
handleBarMove (e) {
// console.log(e)
if (!this.move.status) {
return false
} else {
// 獲取dom的位置資訊
let rect = this.$refs.progress.getBoundingClientRect().left
// 獲取播放器dom物件
let player = document.querySelector('#player')
// 觸控移動結束事件 計算進度值
let endX = e.clientX || e.touches[0].pageX;
let progressWidth = this.$refs.progress.clientWidth
this.progress = (endX - rect) / progressWidth
player.currentTime = this.progress * this.longTime
player.play()
this.start = true
}
},
//滑鼠/觸控釋放事件
handleBarUp (e) {
e.stopPropagation();
if (this.move.status) {
this.move.status = false;
// 獲取dom的位置資訊
return false
}
},
}
}
</script>
<style lang="less" scoped>
.player-box{
position: relative;
.palyer-cover{
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
background: #F3F3F3;
.mint-swipe-item{
background: #F3F3F3;
img{
width: 100%;
}
}
}
.palyer-music{
width: 100%;
height: 52px;
position: absolute;
bottom: 0;
left: 0;
padding: 0 10px;
box-sizing: border-box;
display: flex;
justify-content: center;
align-items: center;
background:linear-gradient(360deg,rgba(0,0,0,0.5),rgba(0,0,0,0));
.play-btn{
height: 100%;
width: 32px;
display: flex;
align-items: center;
img{
width: 32px;
}
}
.progress-box{
flex: 1;
margin: 0 10px;
display: flex;
position: relative;
.progress-bg{
width: 100%;
height: 2px;
position: absolute;
top: 0;
left: 0;
background:rgba(255,255,255,1);
border-radius:4px;
}
.progress-bar{
width: 20%;
height: 2px;
background: #E91E63;
position: absolute;
.progress-lot{
display: block;
width: 19px;
height: 19px;
background: url('../../assets/images/ [email protected]') no-repeat center;
background-size: 100%;
position: absolute;
top: -9.5px;
right: -9.5px;
}
}
}
.palyer-time{
font-size: 12px;
color: #fff;
}
}
}
</style>