使用 javascript 播放以 base64 编码的 .wav 声音文件

Posted 2023-03-07

【中文标题】使用 javascript 播放以 base64 编码的 .wav 声音文件

【英文标题】：play .wav sound file encoded in base64 with javascript

【发布时间】：2013-07-19 17:21:39

【问题描述】：

我可以通过以下方式使用 javascript 播放声音，

    var snd = new Audio('sound.wav');
    snd.play();

这会播放所需的声音，但有时加载速度很慢，甚至可能根本不加载 所以我用 base 64 对声音进行了编码，并尝试以这种方式播放。

      var splash = 
prefix: "data:audio/wav;base64,",
sound: [ "*base64 string here*" ] ;

    var snd = new Audio(splash); 
    snd.play();

但声音不播放，有什么办法吗？

【问题讨论】：

你现在做了什么？为什么要将音频编码为 base64 ！

为了让它播放得更快，我看到它是在一个插件中完成的，google fart scroll

在 2018 年，Chrome 似乎不支持这种方式播放 WAV。如果您snd.play().catch(err=>console.log(err))，您将看到：“NotSupportedError：该元素没有支持的来源。”我的解决方案是使用 mp3s 而不是 wavs。 @Fong-Kah-Chun 提供的链接，用于生成传递给 new Audio 的字符串，顺便说一句效果很好。

【参考方案1】：

这看起来不像为htmlAudioElement / <audio> 使用Audio 构造函数的正确方法。

微调

var snd = new Audio("data:audio/wav;base64," + base64string);
snd.play();

如果它在控制台中有效但在脚本中无效，则可能正在收集垃圾，在这种情况下，它会保持范围

var Sound = (function () 
    var df = document.createDocumentFragment();
    return function Sound(src) 
        var snd = new Audio(src);
        df.appendChild(snd); // keep in fragment until finished playing
        snd.addEventListener('ended', function () df.removeChild(snd););
        snd.play();
        return snd;
    
());
// then do it
var snd = Sound("data:audio/wav;base64," + base64string);

【讨论】：

感谢一百万 @paul s.，但你认为哪个加载更快，base64 或声音文件？

@UDcreate 这取决于您的意思是“加载速度更快”。 base64 表示页面加载时间更长，具体取决于服务器的 ping 和声音文件大小可能比 page+ 更长初始加载的文件，因为base64占用更多空间，但是一旦页面加载，声音将立即可用。或者，如果您使用文件，页面加载速度会更快，但可能会有延迟当您想要播放声音时，会从服务器获取声音。

@UDcreate 这取决于。 gzip 压缩后，base64 非常快。原始声音文件具有二进制格式，因此在开始时更加压缩。反正wav格式很大。除了性能测试，没有什么能告诉你真相。

@UDcreate 也，如果答案有帮助，请投票。如果某个答案解决了您的问题，请选择它作为解决方案，以便其他人知道问题已解决。

@Vasanth 在 2018 年，Chrome 似乎不支持以这种方式播放 WAV。如果你 snd.play().catch(err=>console.log(err)) 你会看到：“NotSupportedError: The element has no supported sources.”我的解决方案是使用 mp3s 而不是 wavs。

【参考方案2】：

var snd = new Audio("data:audio/x-wav;base64, <URI data>");
snd.play();

不需要将splash声明为对象变量。

Base64 转换可以通过以下方式轻松完成： https://dopiaza.org/tools/datauri/index.php