js实现音乐播放
使用HTML5 Audio API实现音乐播放
在HTML中创建<audio>元素，通过JavaScript控制播放、暂停等功能。以下是一个基础实现示例：
<audio id="myAudio" src="music.mp3"></audio>
<button onclick="playAudio()">播放</button>
<button onclick="pauseAudio()">暂停</button>
<script>
const audio = document.getElementById("myAudio");
function playAudio() {
audio.play();
}
function pauseAudio() {
audio.pause();
}
</script>添加音量控制功能
通过设置volume属性（范围0-1）可以调整音量：
function setVolume(vol) {
audio.volume = vol; // 例如0.5表示50%音量
}实现进度条功能
结合timeupdate事件和currentTime属性可显示播放进度：
audio.addEventListener('timeupdate', function() {
const progress = (audio.currentTime / audio.duration) * 100;
document.getElementById('progressBar').style.width = progress + '%';
});
function seekTo(position) {
audio.currentTime = (position / 100) * audio.duration;
}播放列表管理
创建播放列表数组并实现切换功能：
const playlist = [
'song1.mp3',
'song2.mp3',
'song3.mp3'
];
let currentTrack = 0;
function playNext() {
currentTrack = (currentTrack + 1) % playlist.length;
audio.src = playlist[currentTrack];
audio.play();
}添加可视化效果
使用Web Audio API可以创建音频分析器实现频谱可视化：
const audioContext = new AudioContext();
const analyser = audioContext.createAnalyser();
const source = audioContext.createMediaElementSource(audio);
source.connect(analyser);
analyser.connect(audioContext.destination);
function visualize() {
const bufferLength = analyser.frequencyBinCount;
const dataArray = new Uint8Array(bufferLength);
analyser.getByteFrequencyData(dataArray);
// 使用dataArray绘制可视化效果
}移动端兼容性处理
iOS系统需要用户交互后才能播放音频，可以这样处理：
document.body.addEventListener('touchstart', function() {
audio.play().then(() => audio.pause());
}, { once: true });错误处理
添加错误监听确保稳定运行：
audio.addEventListener('error', function() {
console.error('音频加载失败:', audio.error);
});响应式设计建议
使用媒体查询确保播放控件在不同设备上显示正常：
@media (max-width: 600px) {
.player-controls {
padding: 10px;
font-size: 14px;
}
}
