V2EX 07月25日 17:22
[JavaScript] 前端 js 播放 base64 编码的 mp3,放出来杂音很大,请教是哪里出错了?
index_new5.html
../../../zaker_core/zaker_tpl_static/wap/tpl_guoji1.html

 

探讨在解码Base64编码的MP3音频数据时,转换为blob后播放出现的杂音问题及解决方案。

后端传来是 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>

Fish AI Reader

Fish AI Reader

AI辅助创作,多种专业模板,深度分析,高质量内容生成。从观点提取到深度思考,FishAI为您提供全方位的创作支持。新版本引入自定义参数,让您的创作更加个性化和精准。

FishAI

FishAI

鱼阅,AI 时代的下一个智能信息助手,助你摆脱信息焦虑

联系邮箱 441953276@qq.com

相关标签

Base64编码 MP3解码 音频杂音 Web音频API
相关文章