为声音元素数组创建一个音频对象 jquery, javascript

Question

我目前有很多这样的声音元素

var AudioGood = document.createElement('audio');
AudioGood.controls = true;
AudioGood.src = 'sounds/good.wav';
AudioGood.volume=0.5;

var AudioWrong = document.createElement('audio');
AudioWrong.controls = true;
AudioWrong.src = 'sounds/wrong.wav';
AudioWrong.volume=0.5;

等等。我不喜欢那样。我尝试做类似的东西

function track (name,controls,src,volume,loop){
    this.name = name;
    this.controls = controls;
    this.src = src;
    this.volume = volume;
    this.loop = loop;
}

var music = [
new track ('AudioGood',true,'sounds/good.wav',0.5,false),
new track ('AudioWrong',true,'sounds/wrong.wav',0.5,false),
new track ('musicBackground',true,'sounds/background.ogg',0.5,true),
new track ('AudioDrop',true,'sounds/drop.wav',0.5,false),
new track ('AudioCard',true,'sounds/card.wav',0.5,false)
];

但我需要创建一个音频元素 document.createElement('audio')。我该怎么做？这可能是一个愚蠢的问题，但请仁慈...

Answer 1

最合乎逻辑的方法是创建一个类似element 的属性指向 DOM 元素：

function Track (name, controls, src, volume, loop) {
    this.name = name;
    this.element = document.createElement('audio');
    this.element.controls = controls;
    this.element.src = src;
    this.element.volume = volume;
    this.element.loop = loop;
}

此外，即使this.element 的属性可以公开访问，在轨道原型上创建必要的 getter/setter 方法也是一个不错的设计选择。例如：

Track.prototype.setVolume = function(value) {
    this.element.volume = value;
};

Answer 2

您可以从track 函数中返回一个音频元素，而不是使用track 作为构造函数。

     function track (name,controls,src,volume,loop) {

            var  audio = document.createElement('audio');

          audio.name = name;
          audio.controls = controls;
          audio.src = src;
          audio.volume = volume;
          audio.loop = loop;

         return audio;

    };

var music = [
   track('AudioGood',true,'sounds/good.wav',0.5,false),
   track('AudioWrong',true,'sounds/wrong.wav',0.5,false),
   track('musicBackground',true,'sounds/background.ogg',0.5,true),
   track('AudioDrop',true,'sounds/drop.wav',0.5,false),
   track('AudioCard',true,'sounds/card.wav',0.5,false)
];