JS纯前端实现audio音频分片播放

一、JS纯前端实现audio音频分片播放

实现JS前端音频分片播放的目的，主要是为了优化流量使用，避免传输不必要的长时间音频数据。以下为实现步骤：

首先，利用File对象转ArrayBuffer。用户上传的文件（如MP3、OGG或WAV格式）被封装为一个File对象。我们将其转换为ArrayBuffer类型，以便进行进一步处理。转换代码如下：

使用readAsArrayBuffer()方法进行转换。

转换后的ArrayBuffer数据被解析为多个音频片段，类似于将音频文件拆分并存入具有地址的“小屋”中。为实现音频剪裁，需要将ArrayBuffer转换为AudioBuffer。

AudioBuffer专为音频数据设计，相较于ArrayBuffer，它提供了处理音频数据的专用接口，如通道数据处理方法等。通过AudioContext对象的decodeAudioData()方法，可以将ArrayBuffer转换为AudioBuffer。

接着，复制AudioBuffer前3秒的数据。通过创建一个空的AudioBuffer，并将现有通道数据的前3秒内容复制到新AudioBuffer中，便能实现音频片段的提取。

有了剪裁后的AudioBuffer，可以将其用于播放、在元素中播放、转换成WAV格式的Blob数据进行上传或转换成Base64格式。代码示例如下：

将剪裁后的AudioBuffer转换为WAV格式的Blob数据，可以使用以下方法：

将得到的Blob数据转换为URL，从而实现音频文件的直接播放。

若希望将Blob数据上传，可以使用FormData进行数据传输。

实现音频分片播放后，不仅节省了流量，还提供了更加灵活的音频处理能力。通过上述步骤，前端开发者能够高效地实现音频的分片播放功能。

二、如何用js控制audio元素连续播放mp3文件

1、首先我们先来看一下音频元素最基本的应用以及样式，如下图所示，运用audio元素即可,controls是用来控制是否显示控制条。

2、另外音频文件的格式也可以多样，如下图所示，也可以是ogg文件。

3、接下来我们来看一下音频元素的属性，上面创建的音频元素你发现它需要手动点击才能播放。如果你加了autoplay就会自动播放，如下图所示。

4、还有一个loop属性，是用来控制音频文件是否循环播放的，如下图所示。

5、接下来，preload属性是用来告诉音频文件是否预加载的，加上这个属性后。

6、最后要提醒的是src里面不仅可以写本地的文件，也可以写远程的文件地址，如下图所示。

三、jsaudio播放音乐突然终止

音频文件路径错误，音频文件格式不支持。

1、音频文件路径错误：jsaudio播放音乐突然终止检查音频文件的路径是否正确，确保文件存在且路径正确，否则无法正常播放音乐。

2、音频文件格式不支持：jsaudio只支持特定的音频格式，例如mp3、wav等，检查音频文件的格式是否被支持，不支持需要转换为支持的格式。