在前端实现音频播放：处理后端传来的二进制 MP3 数据

在前端开发中，我们有时需要处理后端传来的音频文件，并将其转换为可播放的格式。这篇博客将详细介绍如何在前端处理来自后端的二进制 MP3 数据，最终实现音频的播放。通过分析解决过程中的几个关键步骤，我们将探讨如何使用 blob、base64 以及 axios 等工具和方法来完成任务。

问题描述

项目要求在前端播放音频文件，而后端将 MP3 文件转换成二进制格式后，通过网络传递到前端。接收到的数据是一大串乱码，如何将其正确地转换回 MP3 格式并播放出来，成了我们需要解决的问题。

解决过程

1. 尝试直接打开数据

首先，我们尝试了右键点击并复制这串乱码，想要通过一些工具或搜索来寻找答案。偶然间发现了浏览器的一个选项“在新标签页打开”，便尝试点击了一下，结果令人惊讶——居然成功打开并播放了音频。

虽然这是一个意外的发现，但这并不能作为一种通用的解决方案，因此我们继续探索更为稳妥的方法。

2. 使用 blob 和 base64

在研究了大量博客和资料后，我们发现了两个关键的技术点：blob 和 base64。这两个技术常常在处理文件数据时被提及，因此我们决定尝试将获取到的二进制数据转换为 blob，并进一步处理。

关于 blob

Blob 对象表示一个不可变的、原始数据的类文件对象。Blob 表示的不一定是JavaScript原生格式的数据。Blob 的主要作用是为了将 blob 数据转换成其他数据格式，并进一步处理或显示。

常见的音频 blob 类型如下表所示：

文件扩展名	描述	MIME 类型
.aac	AAC 音频	audio/aac
.mid .midi	Musical Instrument Digital Interface (MIDI)	audio/midi, audio/x-midi
.mp3	MP3 音频	audio/mpeg
.oga	OGG 音频	audio/ogg
.wav	波形音频格式	audio/wav
.weba	WEBM 音频	audio/webm
.3gp	3GPP 音频/视频容器	video/3gpp, audio/3gpp（不含视频）

接下来，我们尝试将从后端获取到的二进制数据转换为 blob 格式，并尝试将其作为音频播放。

实现代码：

async playSoundmark(id) {
    const data = await this.$api.playSoundmark({
        params: {
            soundmarkId: id,
        },
    });

    let reader = new FileReader();
    reader.readAsDataURL(new Blob([data], { type: 'audio/wav' }));
    reader.onload = function() {
        console.log(this.result);
    };
}

分析：

• Blob([data], { type: 'audio/wav' })：将二进制数据转换为 blob 对象，指定其 MIME 类型为 audio/wav。
• FileReader.readAsDataURL()：读取 blob 对象并将其转换为 base64 编码的 Data URL。
• reader.onload：在文件加载完成后，我们可以获取到转换后的 base64 数据。

但是，进一步尝试将 base64 转换为 URL 并在页面上渲染时，我们发现这实际上就是 Data URL，在渲染时仍然存在问题。因此，我们决定采用一种更为简单直接的方式来实现音频播放。

3. 通过 axios 截取 URL

经过多次尝试和思考，我们意识到，如果能直接获取到当前请求的 URL，那么我们就可以直接将其作为音频的源地址进行播放。于是，我们决定修改 axios 的 get 方法，截取并保存当前请求的 URL，之后直接使用该 URL 进行播放。

修改 axios 代码：

export function get(url) {
    return (data = {}, config) => Promise.resolve(
        web.get(url, data, config).then(response =>  {
            window.localStorage.setItem('url',`http://项目地址:8088${url}`);
            return response.data;
        })
    );
}

这段代码修改了 axios 的 get 方法，在请求成功后，将请求的完整 URL 保存到 localStorage 中。

前端渲染代码：

接下来，我们在前端页面上添加一个 audio 标签，并通过 JavaScript 设置其音频源为我们存储的 URL。

<audio autoplay controls id="playMp3"></audio>

<script>
    let playMp3 = document.getElementById("playMp3");
    playMp3.src = window.localStorage.getItem("url") + `?soundmarkId=${id}`;
    console.log(playMp3.src);
    playMp3.load();
</script>

通过这种方式，我们成功实现了在前端播放后端传来的音频文件。

参考链接

• MDN - Blob
• MDN - FileReader
• 关于 Blob 和 Base64

总结

在这篇博客中，我们探讨了如何在前端处理后端传来的二进制音频数据，并将其转换为可播放的 MP3 文件。在解决过程中，我们尝试了多种方法，最终通过 axios 请求 URL 的方式成功实现了音频播放。这种方法简单直接，适用于多种场景，希望对大家有所帮助。