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

IT技术 javascript html base64
2021-01-14 18:29:21

能够通过以下方式使用 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();

但是声音没有播放，有没有办法解决它？

2个回答

这看起来不像是为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);
@UDcreate 也是，如果答案有帮助，请投票。如果答案解决了您的问题，请将其选为解决方案，以便其他人知道问题已解决。
2021-03-17 18:29:21
感谢一百万@paul s.，但你认为哪个加载速度更快，base64 还是声音文件？
2021-03-21 18:29:21
@UDcreate 这取决于。gzip 压缩后，base64 非常快。原始声音文件具有二进制格式，因此在开始时更加压缩。反正wav格式很大。除了性能测试，没有什么能告诉你真相。
2021-03-31 18:29:21
@Vasanth 在 2018 年，Chrome 似乎不支持以这种方式播放 WAV。如果你 snd.play().catch(err=>console.log(err)) 你会看到：“NotSupportedError：该元素没有支持的来源。” 我的解决方案是使用 mp3 而不是 wavs。
2021-04-09 18:29:21
@UDcreate 这取决于您的意思是“加载速度更快”。该BASE64意味着页面需要更长的时间来加载，这取决于你的服务器的ping 和声音文件的大小甚至可能长于页+文件的初始加载，因为的base64占用更多的空间，但一旦加载页面时，声音将可瞬间. 或者，如果您使用文件，页面加载速度会更快，但是当您想播放它时从服务器获取声音时可能会有延迟。
2021-04-10 18:29:21 
var snd = new Audio("data:audio/x-wav;base64, <URI data>");
snd.play();

无需将splash声明为对象变量。

可以从以下位置轻松完成 Base64 转换：https : //dopiaza.org/tools/datauri/index.php

其它你可能感兴趣的问题
上一篇变换后的宽度/高度 下一篇用 C# 抓取 JavaScript 生成的网页