用js写实现音乐播放器
基础音乐播放器实现
使用HTML5的<audio>元素配合JavaScript控制播放功能。以下是一个简单实现：
<!DOCTYPE html>
<html>
<head>
<title>音乐播放器</title>
<style>
.player {
width: 300px;
padding: 20px;
border: 1px solid #ccc;
}
.controls button {
margin: 0 5px;
}
</style>
</head>
<body>
<div class="player">
<audio id="audio" src="your-music-file.mp3"></audio>
<div class="controls">
<button id="playBtn">播放</button>
<button id="pauseBtn">暂停</button>
<button id="stopBtn">停止</button>
<input type="range" id="volume" min="0" max="1" step="0.1" value="0.7">
</div>
<div class="progress">
<input type="range" id="progress" min="0" max="100" step="1" value="0">
</div>
</div>
<script>
const audio = document.getElementById('audio');
const playBtn = document.getElementById('playBtn');
const pauseBtn = document.getElementById('pauseBtn');
const stopBtn = document.getElementById('stopBtn');
const volumeControl = document.getElementById('volume');
const progressBar = document.getElementById('progress');
playBtn.addEventListener('click', () => {
audio.play();
});
pauseBtn.addEventListener('click', () => {
audio.pause();
});
stopBtn.addEventListener('click', () => {
audio.pause();
audio.currentTime = 0;
});
volumeControl.addEventListener('input', () => {
audio.volume = volumeControl.value;
});
audio.addEventListener('timeupdate', () => {
progressBar.value = (audio.currentTime / audio.duration) * 100;
});
progressBar.addEventListener('input', () => {
audio.currentTime = (progressBar.value / 100) * audio.duration;
});
</script>
</body>
</html>增强功能实现
添加播放列表和更多控制功能：
// 播放列表功能
const playlist = [
{ title: '歌曲1', src: 'song1.mp3' },
{ title: '歌曲2', src: 'song2.mp3' },
{ title: '歌曲3', src: 'song3.mp3' }
];
let currentTrack = 0;
function loadTrack(index) {
audio.src = playlist[index].src;
document.getElementById('trackTitle').textContent = playlist[index].title;
audio.play();
}
document.getElementById('prevBtn').addEventListener('click', () => {
currentTrack = (currentTrack - 1 + playlist.length) % playlist.length;
loadTrack(currentTrack);
});
document.getElementById('nextBtn').addEventListener('click', () => {
currentTrack = (currentTrack + 1) % playlist.length;
loadTrack(currentTrack);
});
// 自动播放下一首
audio.addEventListener('ended', () => {
currentTrack = (currentTrack + 1) % playlist.length;
loadTrack(currentTrack);
});高级功能扩展
添加可视化效果和更多交互：
// 音频可视化
const canvas = document.getElementById('visualizer');
const ctx = canvas.getContext('2d');
const audioContext = new (window.AudioContext || window.webkitAudioContext)();
const analyser = audioContext.createAnalyser();
const source = audioContext.createMediaElementSource(audio);
source.connect(analyser);
analyser.connect(audioContext.destination);
analyser.fftSize = 256;
const bufferLength = analyser.frequencyBinCount;
const dataArray = new Uint8Array(bufferLength);
function drawVisualizer() {
requestAnimationFrame(drawVisualizer);
analyser.getByteFrequencyData(dataArray);
ctx.fillStyle = 'rgb(0, 0, 0)';
ctx.fillRect(0, 0, canvas.width, canvas.height);
const barWidth = (canvas.width / bufferLength) * 2.5;
let x = 0;
for(let i = 0; i < bufferLength; i++) {
const barHeight = dataArray[i] / 2;
ctx.fillStyle = `rgb(${barHeight + 100}, 50, 50)`;
ctx.fillRect(x, canvas.height - barHeight, barWidth, barHeight);
x += barWidth + 1;
}
}
audio.addEventListener('play', () => {
audioContext.resume().then(() => {
drawVisualizer();
});
});响应式设计优化
添加CSS媒体查询使播放器适应不同设备：
@media (max-width: 600px) {
.player {
width: 90%;
padding: 10px;
}
.controls button {
padding: 8px 12px;
font-size: 14px;
}
}本地存储功能
保存用户偏好设置：
// 保存音量设置
volumeControl.addEventListener('change', () => {
localStorage.setItem('playerVolume', volumeControl.value);
});
// 加载保存的设置
window.addEventListener('load', () => {
const savedVolume = localStorage.getItem('playerVolume');
if(savedVolume) {
audio.volume = savedVolume;
volumeControl.value = savedVolume;
}
});这些代码片段展示了从基础到高级的音乐播放器实现方法，可以根据需求组合使用或进一步扩展。
