网页设计-音乐播放功能

实现音乐的播放/暂停（一）

*实现目标*：1.实现音乐播放以及暂停。2.同时实时更新音乐进度条的位置。3.音乐播放时间与音乐总时长的显示。4.实现拖动进度条改变音乐播放位置。5.音乐播放结束时，回到初始位置。

*思路*：1.定义一个audio标签 ：

 <audio src="./audio/起风了-权三岁.mp3" id="domMusic"></audio>

（这里使用vidio标签也可以，vidio可以播放声音也可以播放视频；audio只能播放声音）

2.实现音乐的播放与暂停：

JavaScript 方法中有可以直接使音乐暂停与播放的方法：.play和.pause方法。但是这里我们还需要实现其他功能（进度条的移动和播放时间的显示），所以需要定义两个函数：startPlay()和pause()。我们可以申明一个变量isPlaying来跟踪音乐播放状态，当鼠标点击播放/暂停按钮时，如果音乐是暂停状态，则执行startPlay()函数；如果音乐是播放状态，则执行pause()函数，我们将这两个功能封装成一个play()函数，这样做的原因是，当鼠标点击按钮时，直接执行play()函数即可。接着在播放按钮上添加事件监听，这里直接在html标签中添加οnclick="play()"，当事件属性onclick响应时，执行js中的play()函数。

3.实现音乐进度条的实时更新以及播放时间的显示：

通过第二点可以知道，我们需要定义三个主要的函数：play()函数检测音乐播放状态，判断点击按钮时，音乐是播放还是暂停；startPlay()函数实现音乐开始播放，获取音乐播放的实时位置，更新红色进度条和小圆点的位置以及音乐播放时间，以及播放结束时回到初始位置；pause()函数实现音乐停止播放，停止进度条的移动以及时间的更新。

以下是函数的具体实现：

（1）startPlay()：首先实现进度条的移动，我们需要获取进度条容器的宽度，然后根据音乐播放的时间（domMusic.currentTime）和音乐总时长（domMusic.duration）的百分比，可以计算出红色进度条的宽度。根据这个宽度我们也可以更新小圆点的位置。接着实现播放时间与总时长的显示，我们可以通过domMusic.duration获取音频的总时长，注意获取的时间单位为秒，我们需要将其转化成00：00的格式。同理音乐播放的时间（domMusic.currentTime）也是如此。因为显示的音乐播放时间需要每秒更新一次，我们通过setInterval函数，每隔一秒更新进度条的位置和显示的时间。最后要实现音乐播放结束时回到初始位置，即添加一个对于音乐结束的监听事件。

（2）pause()：通过domMusic.pause()方法暂停音乐播放。将setInterval函数放回的定时器ID赋值给一个变量INV，通过清除定时器（clearInterval(INV)），实现进度条和时间的暂停。最后更新播放状态为暂停。

4.实现拖拽进度条，改变音乐播放位置：（实现进度条的拖拽功能看第一大点）

在进度条容器上添加鼠标监听事件，通过鼠标点击位置计算出对应的播放时间。

*具体代码实现（js）*：

let domMusic = document.getElementById('domMusic');


if (!domMusic) {
  console.error('无法找到ID为domMusic的元素');
}

let isPlaying = false; // 用于跟踪音乐的播放状态
let INV = null; // 用于存储定时器ID

function initTime() {
  let totalMin = Math.floor(domMusic.duration / 60); // domMusic.duration获取总播放时间，单位为秒
  let totalSec = Math.floor(domMusic.duration % 60);
  document.querySelector('.desTime').textContent = '/' + padZero(totalMin) + ':' + padZero(totalSec);
  //$('.desTime'): 这是一个jQuery的选择器，用于选择页面上class属性值为.desTime的元素。

}

function padZero(num) {
  return num < 10 ? '0' + num : num.toString();
}

function play() {
  if (isPlaying) {
    pause(); // 如果音乐正在播放，则暂停
  } else {
    startPlay(); // 如果音乐没有播放，则开始播放
  }
}

//开始播放
function startPlay() {
  initTime(); // 初始化时长显示
  domMusic.play();
  isPlaying = true; // 设置播放状态为播放中
  let bar = document.getElementById('mu_bar'); // 获取进度条容器
  let redBar = document.getElementById('mu_rbar'); // 获取红条
  let dot = document.getElementById('mu_dot'); // 获取小圆点

  let barWidth = bar.clientWidth; // 获取进度条容器的宽度
  let redBarWidth = Math.floor(barWidth * (domMusic.currentTime / domMusic.duration)); // 根据当前时间计算红条的宽度

  redBar.style.width = redBarWidth + 'px'; // 设置红条的宽度
  // 清除之前的定时器
  if (INV !== null) {
    clearInterval(INV);
  }

  INV = setInterval(function() {
    let currentTime = domMusic.currentTime;
    let currentMin = Math.floor(currentTime / 60);
    let currentSec = Math.floor(currentTime % 60);
    document.querySelector('.curTime').textContent = padZero(currentMin) + ':' + padZero(currentSec); // 更新时间
    redBarWidth = Math.floor(barWidth * (currentTime / domMusic.duration));
    redBar.style.width = redBarWidth + 'px'; // 更新红条的宽度
    dot.style.left = redBarWidth - 5 + 'px'; // 设置小圆点位置
  }, 1000);

  // 监听音乐播放结束
  domMusic.addEventListener('ended', function() {
    clearInterval(INV);
    redBar.style.width = '0px'; // 重置红条的宽度
    dot.style.left = '-5px'; // 重置小圆点
    document.querySelector('.curTime').textContent = '00:00'; // 重置当前时间显示
    isPlaying = false; // 重置播放状态
  });


}

//暂停播放
function pause() {
  domMusic.pause();
  if (INV !== null) {
    clearInterval(INV); // 清除定时器
  }
  isPlaying = false; // 设置播放状态为暂停
}