让音乐“看得见”：使用 HTML + JavaScript 实现酷炫的音频可视化播放器

本文链接：https://blog.youkuaiyun.com/cfxiaoding/article/details/148435258

在这个数字时代，音乐不仅是听觉的享受，更可以成为视觉的盛宴！本文用 HTML + JavaScript 实现了一个音频可视化播放器，它不仅能播放本地音乐、控制进度和音量，还能通过 Canvas 绘制炫酷的音频频谱图，让你“听见色彩，看见旋律”。

效果演示

核心功能

本项目主要包含以下核心功能：

音频播放控制：支持播放、暂停、上一首、下一首等基本操作。
进度控制：显示当前播放时间和总时长，并支持点击进度条跳转。
音量调节：提供滑动条调节播放音量。
播放列表管理：支持动态添加本地音乐文件，显示播放列表并高亮当前播放曲目。
音频可视化：通过Canvas实时绘制音频频谱图，增强用户体验。

页面结构

音频可视化容器

使用 HTML5 的 canvas 元素来绘制动态的音频频谱图。

<div class="visualizer">
    <canvas id="visualizer"></canvas>
</div>

操作控制区域

整个音乐播放器的主要控制区域，包含播放进度条与时间显示、播放控制按钮、音量调节滑块、文件上传控件。

<div class="controls">
    <div class="progress-container" id="progress-container">
        <div class="progress-bar" id="progress-bar"></div>
    </div>
    <div class="time-display">
        <span id="current-time">0:00</span>
        <span id="total-time">0:00</span>
    </div>
    <div class="control-row">
        <div class="left"></div>
        <div class="buttons">
            <button id="prev-btn">上一首</button>
            <button id="play-btn">播放</button>
            <button id="next-btn">下一首</button>
        </div>
        <div class="volume-control">
            <span>音量</span>
            <input type="range" min="0" max="1" step="0.01" value="0.7" class="volume-slider" id="volume-control">
        </div>
    </div>
    <div class="file-upload">
        <input type="file" id="file-input" accept="audio/*" multiple>
        <label for="file-input">添加音乐文件</label>
    </div>
</div>

播放列表区域

该区域用于展示用户上传的音频文件列表，并提供一个初始为空时的提示信息。

<div class="playlist">
    <h2>播放列表</h2>
    <div id="playlist-items">
        <div class="empty-playlist">暂无音乐，请添加音乐文件</div>
    </div>
</div>

核心功能实现

添加本地音乐文件

使用 URL.createObjectURL 创建本地文件链接供 audio 播放。

function addMusicFiles(files) {
   
    for (let i = 0; i < files.length; i++) {
   
        const file = files[i];
        const url = URL.createObjectURL(file);
        playlist.push({
   
            name: file.name.replace(/\.[^/.]+$/, ""), // 移除扩展名
            url: url
        });
    }
    // 如果是第一次添加音乐，自动加载第一首
    if (playlist.length === files.length) {
   
        currentTrack = 0;
        loadTrack();
    }
    renderPlaylist();
}

加载当前曲目

function loadTrack() {
   
    if (playlist.length === 0) return;

    const track = playlist[currentTrack];
    audio.src = track.url;
    audio.load();

    updatePlaylistHighlight();

    if (isPlaying) {
   
        audio.play().catch(e => console.log('播放错误:', e));
    }
}

播放/暂停控制

判断播放列表是否为空，控制播放状态切换，并更新按钮文本，如果播放失败尝试下一首。

function togglePlay() {
   
    if (playlist.length === 0) {
   
        alert('播放列表为空，请先添加音乐');
        return;
    }

    if (isPlaying) {
   
        audio.pause();
        playBtn.textContent = '播放';
    } else {
   
        initAudioContext(); // 首次播放时才初始化音频上下文
        audio.play().catch(e => {
   
            console.log('播放错误:', e);
            nextTrack(); // 播放失败自动下一首
        });
        playBtn.textContent = '暂停';
    }
    isPlaying = !isPlaying;
}