Vue 背景音乐点击随机播放

Vue 背景音乐随机播放，图片点击旋转和暂停

<div  id="music" @click="music" :class="{'cilcle' : iscilcle}" >
         <img src="../../../assets/images/zysx/music.png" alt="">
        <audio id="audio" loop ref="audio" autoplay :src="musicUrl"></audio>
 </div>

<style>
#music{
        width: 100px;
        height: 100px;
    }
 .cilcle{
        animation: myfirst 5s infinite linear;
    }
@keyframes myfirst{
        from {transform: rotate(0deg);}
        to {transform: rotate(360deg);}
	}
#music>img{
        width: 100%;
        height: 100%;
    }
</style>

data() {
        return {
            iscilcle:false,
            musicUrl:'',
            musicList:[
                { src: "01.mp3" },
                { src: "02.mp3" },
                { src: "03.mp3" },
            ],
        }
    },
methods: {
        music(){
            
            var audio = document.getElementById('audio');
            if (audio.paused) {
            let temp = this.index;
                while(this.index==temp){
                //你有几首歌曲在后面*n 序列是从0开始的
                    this.index = parseInt(Math.random()*3);	
                    console.log(this.index);
                }
                this.musicUrl = require("../../../assets/msMusic/" + this.musicList[this.index].src)
                audio.play();  // 播放      
                this.iscilcle=true;

            } else {
            	this.musicUrl = ''
                console.log(this.index);
                audio.pause();// 暂停
                this.iscilcle=false;
            }
        }
   }

一、随机播放需要在data里面定义你所需要的几条音乐，二、在点击播放的时候做一个随机数，这里的index类似于索引，三、因为是本地音乐所以要require（地址+list数组[索引值].src），四、在进入其他页面再回到本页面点击暂停会出现两个首音乐同时播放，需要在else里面清空this.musicUrl，就可以解决。

点击播放图片进行旋转背景随机播放随机音乐，再点击图片暂停旋转回到初始位置，背景音乐暂停播放。