js实现音乐
使用Web Audio API播放音乐
Web Audio API提供强大的音频处理能力，适合实现音乐播放、音效控制等需求。
// 创建音频上下文
const audioContext = new (window.AudioContext || window.webkitAudioContext)();
// 加载音频文件
function loadAudio(url) {
return fetch(url)
.then(response => response.arrayBuffer())
.then(buffer => audioContext.decodeAudioData(buffer));
}
// 播放音频
loadAudio('music.mp3').then(buffer => {
const source = audioContext.createBufferSource();
source.buffer = buffer;
source.connect(audioContext.destination);
source.start();
});通过HTML5 <audio>标签控制音乐
HTML5的<audio>标签简单易用，适合基础播放需求。
<audio id="player" src="music.mp3" controls></audio>
<script>
const player = document.getElementById('player');
player.play(); // 播放
player.pause(); // 暂停
player.volume = 0.5; // 音量调整
</script>实现播放列表功能
通过数组管理多个曲目，并动态切换播放源。
const playlist = ['song1.mp3', 'song2.mp3'];
let currentTrack = 0;
const audio = new Audio(playlist[currentTrack]);
function playNext() {
currentTrack = (currentTrack + 1) % playlist.length;
audio.src = playlist[currentTrack];
audio.play();
}
audio.addEventListener('ended', playNext);添加可视化效果
结合Canvas和Web Audio API实现音频频谱可视化。
const analyser = audioContext.createAnalyser();
source.connect(analyser);
analyser.connect(audioContext.destination);
const canvas = document.getElementById('visualizer');
const ctx = canvas.getContext('2d');
const bufferLength = analyser.frequencyBinCount;
const dataArray = new Uint8Array(bufferLength);
function draw() {
requestAnimationFrame(draw);
analyser.getByteFrequencyData(dataArray);
ctx.clearRect(0, 0, canvas.width, canvas.height);
dataArray.forEach((value, i) => {
ctx.fillRect(i * 10, canvas.height - value, 5, value);
});
}
draw();注意事项
- 跨域问题：确保音频文件与网页同源或服务器允许跨域访问（CORS配置）。
- 移动端限制：部分移动浏览器需用户交互（如点击事件）后才能播放音频。
- 性能优化：大量音频处理建议使用
OfflineAudioContext离线渲染。
以上方法覆盖了从基础播放到高级定制的常见需求，可根据实际场景选择合适方案。
