DEMO——音频播放封装

1.Player封装

<!-- 封装音频播放器 -->
<template>
  <div class="play-container" @mouseenter="onEnterTd" @mouseleave="onLeaveTd">
    <svg viewBox="5 5 100 100" :class="isSvg?'svg':'svg-none'">
         <path d="M 5,55 a 55,55 0 1,1 0,1 z" id="circle" />
             <text>
                 <textPath xlink:href="#circle"> circular reasoning works because </textPath>
             </text>
    </svg>
    <el-image class="bg-img" :src="bgList[id]"></el-image> 
    <div class="play" @click="pause">
        <i class="el-icon-video-play" style="font-size:40px" v-show="!isPlay"></i>
        <i class="el-icon-video-pause" style="font-size:40px" v-show="isPlay"></i>
    </div>
  </div>
</template>
<script>
import play1 from "@/assets/play1.jpg"
import song1 from "@/assets/lucky.mp3"
import song2 from "@/assets/cricket.mp3"
import song3 from "@/assets/badluck.mp3"
import song4 from "@/assets/grasshopper.mp3"
import song5 from "@/assets/frog.mp3"
import song6 from "@/assets/ghost.mp3"
export default {
    props: {
      id: {
          type: Number,
          default: null
      },
    },
  data () {
    return {
        bgList:[play1,play1,play1,play1,play1,play1],
        isPlay:false,
        mp3List:[song1,song2,song3,song4,song5,song6],
        canplay:false,
        audio: ""，
        isSvg:false
    };
  },
  created(){
    this.audio = document.createElement("audio");
    this.audio.src = this.mp3List[this.id]
    let that = this
    this.audio.addEventListener(
      "canplay",
      function () {
        console.log("加载成功");
        that.canplay = true;
      },
      false
    ),
    this.audio.addEventListener(
          "ended",
          function () {
            that.audio.pause(); // 暂停
            that.isPlay = false;
          },
          false
    ) 
},
methods: {
    pause() {
        if (this.audio !== null && this.canplay) {
          this.loading = true;
          if (this.audio.paused) {
            this.audio.play(); // 播放
            this.isPlay = true;
          } else {
            this.audio.pause(); // 暂停
            this.isPlay = false;
            console.log("暂停被调用了");
          }
        } else {
            this.$message({
            showClose: true,
            message: "音乐还没有加载成功呢！",
            type: "warning",
          });
        }
    },
    //鼠标进入的事件。
    onEnterTd(e) {
      this.isSvg = true
    },
    //鼠标离开的事件。
    onLeaveTd(e) {
      this.isSvg = false
    },
  }
}
</script>
<style lang='less' scoped>
.play-container{
    position: relative;
    width: 150px;
    height: 150px;
    
    .bg-img{
        position: absolute;
        left:0;
        top: 0;
        width: 150px;
        height: 150px;
        border-radius: 50%;
    }
   .play{
        position: absolute;
        left: 31%;
        top: 31%;
    }
}

.play-container path { fill: none; }
.play-container .svg { 
  display: block; 
  overflow: visible; 
  animation: myfirst 6s infinite linear;
}
.play-container .svg-none {
  display: none; 
  overflow: visible;
}
@keyframes myfirst
{
    from {transform:rotate(0deg);}
    to {transform:rotate(360deg);}
}
@-webkit-keyframes myfirst
{
    from {transform:rotate(0deg);}
    to {transform:rotate(360deg);}
}
</style>