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

Question

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

I tried setting the parameters for the audio copies from the original file but no juice

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();
};

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

Answer 1

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

这里您不会修改原始的属性，而只是修改一些未反射(reflect)的 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，而不是设置原始节点的值，但请注意，如果您实际上会产生几个相同的音频，您应该使用 Web-Audio API 及其 AudioBuffer interface它对这些媒体的播放时间提供了更大的控制，并且比初始化 DOM MediaElements 占用的内存少得多。