如何强制在运行时加载媒体,而不是现在播放？

Question

我正在制作一个可以长时间打开的网络应用程序.我不想在加载时加载音频(当HTML被下载和解析时)以尽可能快地进行第一次加载并为移动用户节省宝贵的资源.默认情况下禁用音频.将音频放入CSS或使用预加载在这里是不合适的,因为我不想在加载时加载其余部分.

我正在寻找一种理想的方法来在运行时加载音频,(在选中复选框后,这可以在打开应用程序后20分钟后)给出一个音频元素列表.

该列表已经在变量中 allSounds.我在网页上有以下音频(还有更多):

 <audio preload="none">
  <source src="sound1.mp3">
 </audio>

我想保留相同的HTML,因为在第二次访问后我可以轻松地将其更改为(这与我的服务器端HTML生成一起工作正常)

 <audio preload="auto">
  <source src="sound1.mp3">
 </audio>

它的工作原理.

打开选项后,我想加载声音,但不能立即播放.我知道.play()会加载声音.但我想避免按下按钮和相关的反馈声之间的延迟.最好不要播放声音而不是延迟(在我的应用程序中).

我制作了这个事件处理程序来加载声音(它可以工作),但在Chrome控制台中,它说下载已取消,然后重新启动我不知道我到底做错了什么. 这是强制加载声音的正确方法吗？还有什么其他方法？如果可能,不更改HTML.

let loadSounds = function () {
  allSounds.forEach(function (sound) {
    sound.preload = "auto";
    sound.load();
  });
  loadSounds = function () {}; // Execute once
};

这里是playSound功能,但对于这些问题不是很重要

const playSound = function (sound) {
  // PS
  /* only plays ready sound to avoid delays between fetching*/
  if (!soundEnabled)) {
    return;
  }
  if (sound.readyState < sound.HAVE_ENOUGH_DATA) {
    return;
  }
  sound.play();
};

附带问题:preload="full"HTML规范中应该有吗？

另请参阅: 在队列中预加载mp3文件,以避免在队列中播放下一个文件时出现任何延迟

我们如何播放音频,文字在angularjs中逐字逐句突出显示

Answer 1

我确信我已经为您找到了解决方案。就我而言，您的声音是附加功能，并不是每个人都需要。在这种情况下，我建议在用户单击取消静音按钮后使用纯 JavaScript 加载声音。

解决方案的简单草图是：

window.addEventListener('load', function(event) {
  var audioloaded = false;
  var audioobject = null;

  // Load audio on first click
  document.getElementById('unmute').addEventListener('click', function(event) {
    if (!audioloaded) { // Load audio on first click
      audioobject = document.createElement("audio");
      audioobject.preload = "auto"; // Load now!!!
      var source = document.createElement("source");
      source.src = "sound1.mp3"; // Append src
      audioobject.appendChild(source);
      audioobject.load(); // Just for sure, old browsers fallback
      audioloaded = true; // Globally remember that audio is loaded
    }
    // Other mute / unmute stuff here that you already got... ;)
  });

  // Play sound on click
  document.getElementById('playsound').addEventListener('click', function(event) {
    audioobject.play();
  });
});

当然，按钮应该有id="unmute"，并且为了简单起见，机身id="body"还有播放声音按钮id="playsound。当然，您可以修改它以满足您的需要。之后，当有人单击取消静音时，将生成并动态加载音频对象。

我没有尝试这个解决方案，因此可能会出现一些小错误（我希望不会！）。但我希望这能让您了解（草图）如何使用纯 JavaScript 来完成此操作。

不要担心这是纯 JavaScript，没有 html。这是附加功能，而 javascript 是实现它的最佳方式。