js实现音乐播放器

音乐播放器基础实现

使用HTML5的<audio>元素配合JavaScript实现基础播放功能。以下是一个简单示例：

<audio id="player" src="music.mp3"></audio>
<button onclick="document.getElementById('player').play()">播放</button>
<button onclick="document.getElementById('player').pause()">暂停</button>
<input type="range" id="volume" min="0" max="1" step="0.1" value="1" onchange="document.getElementById('player').volume = this.value">

完整播放器组件开发

创建包含进度条、播放列表等功能的播放器：

const player = document.getElementById('player');
const playlist = ['song1.mp3', 'song2.mp3', 'song3.mp3'];
let currentTrack = 0;

function playTrack(index) {
    player.src = playlist[index];
    player.play();
    currentTrack = index;
}

player.addEventListener('ended', () => {
    currentTrack = (currentTrack + 1) % playlist.length;
    playTrack(currentTrack);
});

// 进度条更新
player.addEventListener('timeupdate', () => {
    const progress = (player.currentTime / player.duration) * 100;
    document.getElementById('progress-bar').style.width = `${progress}%`;
});

可视化效果实现

使用Web Audio API创建音频可视化效果：

const audioContext = new (window.AudioContext || window.webkitAudioContext)();
const analyser = audioContext.createAnalyser();
const source = audioContext.createMediaElementSource(player);
source.connect(analyser);
analyser.connect(audioContext.destination);

function visualize() {
    const canvas = document.getElementById('visualizer");
    const ctx = canvas.getContext('2d');
    const bufferLength = analyser.frequencyBinCount;
    const dataArray = new Uint8Array(bufferLength);

    analyser.getByteTimeDomainData(dataArray);

    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.beginPath();

    for(let i = 0; i < bufferLength; i++) {
        const v = dataArray[i] / 128.0;
        const y = v * canvas.height / 2;

        if(i === 0) {
            ctx.moveTo(i, y);
        } else {
            ctx.lineTo(i, y);
        }
    }

    ctx.stroke();
    requestAnimationFrame(visualize);
}

visualize();

响应式播放器设计

使用CSS实现响应式布局：

.player-container {
    width: 100%;
    max-width: 500px;
    margin: 0 auto;
    padding: 20px;
    background: #f5f5f5;
    border-radius: 10px;
}

.progress-container {
    height: 5px;
    background: #ddd;
    margin: 10px 0;
}

#progress-bar {
    height: 100%;
    background: #4CAF50;
    width: 0%;
}

.controls {
    display: flex;
    justify-content: center;
    gap: 15px;
}

播放器功能扩展

添加更多高级功能：

// 播放速度控制
document.getElementById('playback-rate').addEventListener('change', (e) => {
    player.playbackRate = e.target.value;
});

// 循环模式切换
document.getElementById('loop-toggle').addEventListener('click', () => {
    player.loop = !player.loop;
});

// 歌词同步显示
player.addEventListener('timeupdate', () => {
    const lyrics = [
        {time: 0, text: "第一句歌词"},
        {time: 5, text: "第二句歌词"}
    ];

    const currentLyric = lyrics.findLast(item => item.time <= player.currentTime);
    document.getElementById('lyrics').textContent = currentLyric?.text || '';
});