为什么使用 cloneNode() 创建多个音频文件会阻止我控制音频源的属性以及如何覆盖它

Question

我制作网页游戏已经有一段时间了，我很快注意到，一旦我使用.cloneNode(true)多次播放相同的音频文件，以避免每次我想播放时一遍又一遍地重新下载文件音频文件，我无法控制播放音量和播放速率等内容，有谁知道我如何重新控制每个音频文件副本的这些参数？

我尝试从原始文件中设置音频副本的参数但没有果汁

In the HTML : 
<audio src = "sight.wav" id="sight"/>
<button onclick="playSound()">Play some audio</audio>

In the Js
var get = new Function("id", "return document.getElementById(id)");

function playSound()
{
  get(sight).volume = 0.30;
  get(sight).playbackRate = 0.40;
  get(sight).cloneNode(true).play();
};

对我来说看起来像有效的代码，但就像我说的，没有果汁，cloneNodes 完全忽略音量和播放设置，只播放正常的音频。 我该怎么办？

Answer 1

Node.cloneNode()在 Element 上调用时将创建一个与原始 Node 具有相同属性的相同子类型的新 Element。

在这里，您没有修改原始attributes ，而只是修改了一些未反映因此未克隆的 IDL 属性。

 const original = document.querySelector("audio"); console.log( "default", [...original.attributes].map( (att) => att.name ) ); // [] original.volume = 0.2; console.log( "volume set", [...original.attributes].map( (att) => att.name ) ); // [] original.controls = true; console.log( "controls set", [...original.attributes].map( (att) => att.name ) ); // [ "controls" ] const clone = original.cloneNode(); console.log( "clone volume", clone.volume ); // 1 console.log( "clone controls", clone.controls ); // true

 <audio></audio>

因此，您可以重写代码，以便设置克隆元素的volume和playBackRate ，而不是设置原始节点的volume和playBackRate ，但请注意，如果您真的生成多个相同的音频，则应该使用 Web-Audio API 和它的AudioBuffer 接口可以更好地控制播放这些媒体的时间，并且比初始化 DOM MediaElements 占用更少的内存。