每周一组件之- MP3组件的自我管理

<template>

<div class="player">

<audio

class="hidden"

ref="audio"

@pause="pause"

@play="play"

@timeupdate="updateTime"

@ended="ended"

:src="src"

controls="controls"

controlslist="nodownload"></audio>

<div @click="palyOrPause" class="player-circle" >

<div

class="horn"

:class="[hornStatusClassName]"

></div>

</div>

</div>

</template>

 

<script>

// 组件

let MP3Instance = null;

export default {

name: 'Player',

props: {

src: {

type: String,

default: 'https://jfile.koolearn.com/upload/video/1606547540041.mp3'

}

},

components: {

},

data() {

return {

hornStatusClassName: 'horn1', // 播放时候的css className

isPlaying: false // 记录播放的状态

}

},

methods: {

palyOrPause() {

if (this.isPlaying) {

this.pause()

} else {

this.play()

}

},

pause() {

this.$refs.audio && this.$refs.audio.pause();

this.isPlaying = false;

},

updateTime(e) {

// 时间更新

// this.rate = this.currentTime * 100 / this.durationTime

// 如果已经播放完毕，则标志 hasDone下次点击播放的时候直接不让点击

// this.currentTime = e.target.currentTime || 0; // 获取audio当前播放时间

},

play() {

if (MP3Instance && this != MP3Instance && MP3Instance.$data.isPlaying) {

MP3Instance.$refs.audio.pause();

MP3Instance.$data.isPlaying = false;

}

this.$refs.audio.play();

this.isPlaying = true;

MP3Instance = this;

},

ended() {

this.pause && this.pause();

clearInterval(this.time);

this.time = null;

},

_changeHornStatusClassName() {

let i = 1;

this.time = setInterval(() => {

i++;

if (i == 4) {

i = 1;

}

this.hornStatusClassName = `horn${i}`

}, 500);

}

},

computed: {

},

watch: {

isPlaying(val) {

const _this = this;

if (val) {

_this._changeHornStatusClassName();

} else {

clearInterval(this.time);

this.hornStatusClassName = 'hone1';

}

}

},

mounted() {

 

}

}

</script>

 

<!-- Add "scoped" attribute to limit CSS to this component only -->

<style scoped lang="scss">

.player-circle{

width: 50px;

height: 23px;

line-height: 23px;

border-radius: 13px;

border:1px solid #b0c0c8;

display: inline-block;

display: flex;

justify-content: center;

align-items: center;

cursor: pointer;

&:hover{

background-color: rgb(242, 249, 247)

}

.horn{

width: 14px;

height: 14px;

background:url("./img/laba1.png") center center no-repeat;

background-size: 100% 100%;

}

.horn1{

background:url("./img/laba1.png") center center no-repeat;

background-size: 100% 100%;

}

.horn2{

background:url("./img/laba2.png") center center no-repeat;

background-size: 100% 100%;

}

.horn3{

background:url("./img/laba3.png") center center no-repeat;

background-size: 100% 100%;

}

&:hover{

.horn{

background:url("./img/laba3.png") center center no-repeat;

background-size: 100% 100%;

}

}

}

.hidden{

display: none;

}

</style>