基于原生JavaScript构建交互式音乐播放器及移动端适配指南

<div id="player">  
    <div id="controls">  
        <button id="play">播放</button>  
        <button id="pause">暂停</button>  
        <button id="stop">停止</button>  
        <input id="volume" type="range" min="0" max="1" step="0.1" />  
    </div>  
    <div id="time">00:00 / 00:00</div>  
    <audio id="audio" preload="auto">  
        <source src="song.mp3" type="audio/mpeg">  
    </audio>  
</div>

#player {  
    width: 300px;  
    margin: 0 auto;  
}  
#controls {  
    margin-top: 20px;  
}  
#time {  
    margin-top: 10px;  
}

let audio = document.getElementById('audio'); // 音频元素  
let playButton = document.getElementById('play'); // 播放按钮  
let pauseButton = document.getElementById('pause'); // 暂停按钮  
let stopButton = document.getElementById('stop'); // 停止按钮  
let volumeControl = document.getElementById('volume'); // 音量控制滑块  
let currentTimeDisplay = document.getElementById('time'); // 当前时间显示区域  
let totalTimeDisplay = document.getElementById('total-time'); // 总时间显示区域（这部分在HTML中未显示）

playButton.addEventListener('click', function() { audio.play(); }); // 点击播放按钮时播放音乐  
pauseButton.addEventListener('click', function() { audio.pause(); }); // 点击暂停按钮时暂停音乐  
stopButton.addEventListener('click', function() { audio.pause(); audio.currentTime = 0; }); // 点击停止按钮时暂停音乐并重置时间指针

audio.addEventListener('timeupdate', function() { // 当播放进度更新时触发此事件处理函数  
    let currentTime = audio.currentTime; // 获取当前播放时间（秒）  
    let minutes = Math.floor(currentTime / 60); // 将时间转换为分钟和秒数格式（分钟）  
    let seconds = Math.floor(currentTime % 60); // （秒数）  
    let totalTime = audio.duration; // 获取总播放时间（秒）  
    let totalMinutes = Math.floor(totalTime / 60); // 将总时间转换为分钟和秒数格式（分钟）  
    let totalSeconds = Math.floor(totalTime % 60); // （秒数）  
    currentTimeDisplay.textContent = `${minutes}:${seconds}`; // 在当前时间显示区域显示当前时间（分钟:秒数）格式） 更新当前时间显示区域的内容为格式化的当前时间字符串。

volumeControl.addEventListener('input', function() { // 当音量滑块的值改变时触发此事件处理函数  
    audio.volume = this.value; // 更新音频元素的音量  
});

/* 针对桌面屏幕的样式 */  
@media (min-width: 1024px) {  
  /* 在屏幕宽度至少为1024像素时应用的样式 */  
  .container {  
    width: 80%;  
    margin: auto;  
  }  
}  
  
/* 针对平板屏幕的样式 */  
@media (min-width: 768px) and (max-width: 1023px) {  
  /* 在屏幕宽度介于768像素和1023像素之间时应用的样式 */  
  .container {  
    width: 90%;  
  }  
}  
  
/* 针对手机屏幕的样式 */  
@media (max-width: 767px) {  
  /* 在屏幕宽度小于767像素时应用的样式 */  
  .container {  
    width: 100%;  
    margin: 0;  
  }  
}

// 监听触摸开始事件  
document.addEventListener('touchstart', function(event) {  
  // 处理触摸开始事件  
  console.log('Touch start', event);  
}, false);  
  
// 监听触摸移动事件  
document.addEventListener('touchmove', function(event) {  
  // 处理触摸移动事件  
  console.log('Touch move', event);  
}, false);  
  
// 监听触摸结束事件  
document.addEventListener('touchend', function(event) {  
  // 处理触摸结束事件  
  console.log('Touch end', event);  
}, false);