<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>