vue页面音乐播放器

复制即用，附带弹窗，可以通过悬浮窗来开始播放音乐和暂停音乐。

<template>

  <div>

    <!-- 获取音乐库 -->

    <audio ref="audio" :src="music"></audio>

    <!-- 开始按钮 -->

    <button @click="play">Play</button>

    <!-- 暂停按钮 -->

    <button @click="pause">Pause</button>

    <!-- 悬浮窗，可以控制开始和暂停 -->

    <div class="float-window" @click="pause"></div>

  </div>

</template>

<script>

export default {

  data() {

    return {

      music: ''

    };

  },

  created() {

    this.getMusic();

  },

  methods: {

    // 获取音乐库

    getMusic() {

//api为假接口，可以根据业务逻辑改接口

      api()

        .then(res => {

          this.music = res.music;

          console.log(res, '音乐库');

        })

        .catch(err => {

          console.log(err, '错误的音乐库');

        });

    },

    // 开始播放音乐

    play() {

      this.$refs.audio.play();

    },

    // 暂停播放音乐

    pause() {

      this.$refs.audio.pause();

    }

  }

};

</script>

<style>

.float-window {

  position: fixed;

  bottom: 20px;

  right: 20px;

  width: 50px;

  height: 50px;

  background-color: red;

}

</style>