将原生JS音乐播放器代码转换为Vue.js代码

以下代码示例展示了如何将原生JS音乐播放器代码转换为Vue.js组件，实现音乐播放控制、进度条同步、时间显示等功能。

原生JS代码:

var music = document.querySelector('.music-element')
var playBtn = document.querySelector('.play')
var seekbar = document.querySelector('.seekbar')
var currentTime = document.querySelector('.current-time')
var duration = document.querySelector('.duration')

function handlePlay() {
  // 如果音乐处于暂停状态
  if (music.paused) {
    // 播放音乐，更改按钮样式为暂停图标
    music.play();
    playBtn.className = 'pause'
    playBtn.innerHTML = '<i class="material-icons">pause</i>'
  } else {
    // 暂停音乐，更改按钮样式为播放图标
    music.pause();
    playBtn.className = 'play'
    playBtn.innerHTML = '<i class="material-icons">play_arrow</i>'
  }
  // 当音乐播放完毕时
  music.addEventListener('ended', function () {
    // 更改按钮样式为播放图标，并将音乐当前时间重置为0
    playBtn.className = 'play'
    playBtn.innerHTML = '<i class="material-icons">play_arrow</i>'
    music.currentTime = 0
  });
}

// 当音乐元素的元数据加载完毕时
music.onloadeddata = function () {
  // 设置进度条最大值为音乐总时长
  seekbar.max = music.duration // 将音乐总时长格式化为分钟和秒，并在HTML中显示出来
  var ds = parseInt(music.duration % 60)
  var dm = parseInt((music.duration / 60) % 60)
  duration.innerHTML = dm + ':' + ds
}

// 当音乐当前播放时间更新时
music.ontimeupdate = function () {
  // 将进度条的值设为当前播放时间，以实现进度条随着音乐播放而动态更新
  seekbar.value = music.currentTime
}

// 定义处理进度条拖动的函数
handleSeekBar = function () {
  // 将音乐当前播放时间设为进度条的值，以实现通过拖动进度条控制音乐播放进度
  music.currentTime = seekbar.value
}

// 每当音乐的播放时间更新时
music.addEventListener('timeupdate', function () {
  // 将音乐当前播放时间格式化为分钟和秒，并在HTML中显示出来
  var cs = parseInt(music.currentTime % 60)
  var cm = parseInt((music.currentTime / 60) % 60)
  currentTime.innerHTML = cm + ':' + cs
}, false)

// 爱心点击变色
var favIcon = document.querySelector('.favorite')
function handleFavorite() {
  favIcon.classList.toggle('active');
}

// 循环播放

Vue.js 代码:

<template>
  <div>
    <button @click="handlePlay">播放</button>
    <input type="range" v-model.number="music.currentTime" @input="handleSeekBar">
    <span>{{ currentTime }}</span>
    <span>{{ duration }}</span>
    <i class="material-icons favorite" @click="handleFavorite">favorite</i>
  </div>
</template>

<script>
export default {
  data() {
    return {
      music: null,
      playBtn: null,
      seekbar: null,
      currentTime: null,
      duration: null,
      favIcon: null
    }
  },
  mounted() {
    this.music = document.querySelector('.music-element')
    this.playBtn = document.querySelector('.play')
    this.seekbar = document.querySelector('.seekbar')
    this.currentTime = document.querySelector('.current-time')
    this.duration = document.querySelector('.duration')
    this.favIcon = document.querySelector('.favorite')

    this.music.onloadeddata = () => {
      this.seekbar.max = this.music.duration
      const ds = parseInt(this.music.duration % 60)
      const dm = parseInt((this.music.duration / 60) % 60)
      this.duration.innerHTML = `${dm}:${ds}`
    }

    this.music.ontimeupdate = () => {
      this.seekbar.value = this.music.currentTime
    }

    this.music.addEventListener('timeupdate', () => {
      const cs = parseInt(this.music.currentTime % 60)
      const cm = parseInt((this.music.currentTime / 60) % 60)
      this.currentTime.innerHTML = `${cm}:${cs}`
    }, false)
  },
  methods: {
    handlePlay() {
      if (this.music.paused) {
        this.music.play()
        this.playBtn.className = 'pause'
        this.playBtn.innerHTML = '<i class="material-icons">pause</i>'
      } else {
        this.music.pause()
        this.playBtn.className = 'play'
        this.playBtn.innerHTML = '<i class="material-icons">play_arrow</i>'
      }
      this.music.addEventListener('ended', () => {
        this.playBtn.className = 'play'
        this.playBtn.innerHTML = '<i class="material-icons">play_arrow</i>'
        this.music.currentTime = 0
      })
    },
    handleSeekBar() {
      this.music.currentTime = this.seekbar.value
    },
    handleFavorite() {
      this.favIcon.classList.toggle('active')
    }
  }
}
</script>

解释:

数据属性: 使用 data() 方法定义组件的数据，包括 music、playBtn、seekbar、currentTime、duration 和 favIcon。
生命周期钩子: 使用 mounted() 生命周期钩子来获取 DOM 元素的引用，并设置事件监听器。
事件处理: 使用 methods 定义事件处理函数，包括 handlePlay、handleSeekBar 和 handleFavorite。
模板语法: 使用 Vue.js 的模板语法来绑定数据和事件，以及渲染 HTML 结构。

注意:

该示例代码仅展示了基本的音乐播放器功能，您可以根据您的需求添加更多功能，例如循环播放、随机播放、音量控制等。
确保在 HTML 中添加 music-element、play、seekbar、current-time、duration 和 favorite 类名。
将 material-icons 类名替换为您的实际图标类名。

通过使用 Vue.js，您可以将复杂的功能封装到组件中，使代码更易于维护和扩展。