为什么使用 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();
};

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

Answer 1

Node.cloneNode() 在元素上调用时将创建一个与原始节点具有相同 sub-type 和相同属性的新元素。

此处您没有修改原始文件的 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 而不是设置原始节点的元素，但请注意，如果您真的生成了多个相同的音频，您应该使用 Web-Audio API 及其 AudioBuffer interface ，它们可以更好地控制何时播放这些媒体，并且比初始化 [=35= 占用更少的内存] 媒体元素。

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

Why does using cloneNode() to create multiple audio files stop me from controlling attributes of the audio source as and how can I override this

javascript

audio

clonenode