V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
推荐关注
Meteor
JSLint - a JavaScript code quality tool
jsFiddle
D3.js
WebStorm
推荐书目
JavaScript 权威指南第 5 版
Closure: The Definitive Guide
lisisi
V2EX  ›  JavaScript

前端 js 播放 base64 编码的 mp3,放出来杂音很大,请教是哪里出错了?

  •  
  •   lisisi · 6 天前 · 1488 次点击

    后端传来是 base64-encoded 的 mp3 音频的字符串,码率、声道这些信息( sampleRate 、numChannels 、bitsPerSample 、dataLength )不知道,直接放在<audio>中播放是正常的:

    <audio controls>
      <source src="data:audio/mpeg;base64, base64-encoded-string"  type="audio/mpeg">
    </audio>  
    

    重新解码作为 blob 播放,放出来就很多杂音,这中情况是哪里的问题?

    <script type="text/javascript">
    
        const audioContext = new (window.AudioContext || window.webkitAudioContext)();
        const decoder = new TextDecoder("utf-8");
    
        function base64ToArrayBuffer(base64) {
            const binary = atob(base64);
            const len = binary.length;
            const bytes = new Uint8Array(len);
            for (let i = 0; i < len; i++) {
                bytes[i] = binary.charCodeAt(i);
            }
            return bytes.buffer;
        }
    
        function playAudioChunk(base64) {
            const arrayBuffer = base64ToArrayBuffer(base64);
            audioContext.decodeAudioData(arrayBuffer).then((audioBuffer) => {
                const source = audioContext.createBufferSource();
                source.buffer = audioBuffer;
                source.connect(audioContext.destination);
                source.start(0);
            }).catch((err) => {
                console.error("Error decoding audio data", err);
            });
        }
    
        // ws-connection ...
        playAudioChunk(base64-encoded-string);  
        
    </script>
    
    5 条回复    2025-07-27 14:56:43 +08:00
    join
        1
    join  
       6 天前   ❤️ 1
    你把两边编码都做一下转换。看看转出来的二进制是不是一致的。有可能是你的编解码转出的数据不一致造成的。
    haah
        2
    haah  
       6 天前   ❤️ 1
    1 、https://superuser.com/questions/187424/re-encoding-of-mp3-files-and-quality-loss
    2 、backend using PCM ,frontend using WAV 。
    3 、frontend using pcm2wav method to play the audio object.

    Just like the paddlespeech.
    humbass
        3
    humbass  
       6 天前 via Android   ❤️ 1
    之前搞 tts 语音合成,搞到吐。audio 组件自带解码。直接用 audiocontext 上下文,得还原成原始编码。然后通过 steam 写入,还要保证速率合适的写入。
    ToDayMkCode
        4
    ToDayMkCode  
       6 天前   ❤️ 1
    之前有做过 https://github.com/WtecHtec/WorkNotes/tree/master/pyRTC
    主要是采集、数据编码得一致,
    iv8d
        5
    iv8d  
       4 天前 via Android
    看看原始的 pcm
    关于   ·   帮助文档   ·   自助推广系统   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   5378 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 21ms · UTC 01:31 · PVG 09:31 · LAX 18:31 · JFK 21:31
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.