前端音频文件流

最新推荐文章于 2025-07-01 17:58:10 发布

原创最新推荐文章于 2025-07-01 17:58:10 发布 · 3.4k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #web #音视频 #文件流

博客提供了前端H5语音插件demo，介绍如何将语音二进制流转成audio可播放格式，还分享了blob语音流前端播放的相关内容，以及前端H5中JS用FileReader对象读取blob对象二进制数据实现文件传输的文章链接。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前端H5语音插件demo，语音二进制流转成audio可播放格式

https://blog.csdn.net/qq_37568942/article/details/89470340

blob语音流前端播放

https://blog.csdn.net/Beth__hui/article/details/101442681

前端H5中JS用FileReader对象读取blob对象二进制数据，文件传输

https://www.cnblogs.com/dongxixi/p/11005607.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input id="file" type="file">
    <audio id="myAudio"></audio>
</body>
<script>
    var input  = document.getElementById("file"); //input file
    input.onchange = function(){
        var file = this.files[0];
        if(!!file){
            //读取本地文件，以gbk编码方式输出
            var reader = new FileReader();
            reader.readAsArrayBuffer(file);
            reader.onload = function(e){
                const bufer = e.srcElement.result;
                const blob = addWavHeader(bufer, 16000, 16, 1);
                var srcUrl = window.URL.createObjectURL(blob);
                initAudio(srcUrl)
            }
        }
    }
    var addWavHeader = function (samples, sampleRateTmp, sampleBits, channelCount) {
      const dataLength = samples.byteLength;
      /* 新的buffer类，预留44bytes的heaer空间 */
      const buffer = new ArrayBuffer(44 + dataLength);
      /* 转为 Dataview, 利用API来填充字节 */
      const view = new DataView(buffer);
      let offset = 0;
      /* ChunkID, 4 bytes,  资源交换文件标识符 */
      writeString(view, offset, 'RIFF'); offset += 4;
      /* ChunkSize, 4 bytes, 下个地址开始到文件尾总字节数,即文件大小-8 */
      view.setUint32(offset, /* 32 */ 36 + dataLength, true); offset += 4;
      /* Format, 4 bytes, WAV文件标志 */
      writeString(view, offset, 'WAVE'); offset += 4;
      /* Subchunk1 ID, 4 bytes, 波形格式标志 */
      writeString(view, offset, 'fmt '); offset += 4;
      /* Subchunk1 Size, 4 bytes, 过滤字节,一般为 0x10 = 16 */
      view.setUint32(offset, 16, true); offset += 4;
      /* Audio Format, 2 bytes, 格式类别 (PCM形式采样数据) */
      view.setUint16(offset, 1, true); offset += 2;
      /* Num Channels, 2 bytes,  通道数 */
      view.setUint16(offset, channelCount, true); offset += 2;
      /* SampleRate, 4 bytes, 采样率,每秒样本数,表示每个通道的播放速度 */
      view.setUint32(offset, sampleRateTmp, true); offset += 4;
      /* ByteRate, 4 bytes, 波形数据传输率 (每秒平均字节数) 通道数×每秒数据位数×每样本数据位/8 */
      view.setUint32(offset, sampleRateTmp * channelCount * (sampleBits / 8), true); offset += 4;
      /* BlockAlign, 2 bytes, 快数据调整数 采样一次占用字节数 通道数×每样本的数据位数/8 */
      view.setUint16(offset, channelCount * (sampleBits / 8), true); offset += 2;
      /* BitsPerSample, 2 bytes, 每样本数据位数 */
      view.setUint16(offset, sampleBits, true); offset += 2;
      /* Subchunk2 ID, 4 bytes, 数据标识符 */
      writeString(view, offset, 'data'); offset += 4;
      /* Subchunk2 Size, 4 bytes, 采样数据总数,即数据总大小-44 */
      view.setUint32(offset, dataLength, true); offset += 4;
      if (sampleBits === 16) {
        floatTo16BitPCM(view, samples);
      } else if (sampleBits === 8) {
        floatTo8BitPCM(view, samples);
      } else {
        floatTo32BitPCM(view, samples);
      }
      return new Blob([view], { type: 'audio/wav' });
    }

    var writeString = function(view, offset, string) {
      for (let i = 0; i < string.length; i += 1) {
        view.setUint8(offset + i, string.charCodeAt(i));
      }
        }
    var floatTo32BitPCM = function(output, input) {
        const oinput = new Int32Array(input);
        let newoffset = 44;
        for (let i = 0; i < oinput.length; i += 1, newoffset += 4) {
            output.setInt32(newoffset, oinput[i], true);
        }
        }
    var floatTo16BitPCM = function(output, input) {
        const oinput = new Int16Array(input);
        let newoffset = 44;
        for (let i = 0; i < oinput.length; i += 1, newoffset += 2) {
            output.setInt16(newoffset, oinput[i], true);
        }
        }
    var floatTo8BitPCM = function(output, input) {
        const oinput = new Int8Array(input);
        let newoffset = 44;
        for (let i = 0; i < oinput.length; i += 1, newoffset += 1) {
            output.setInt8(newoffset, oinput[i], true);
        }
        }

    var initAudio = function (srcUrl) {
        var myAudio = document.getElementById("myAudio");
        myAudio.src = srcUrl
        console.log(srcUrl);
        myAudio.autoplay = true
    }
</script>
</html>