javascript - 为一组声音元素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 的属性可公开访问，在轨道原型(prototype)上创建必要的 getter/setter 方法也是一个不错的设计选择。例如:

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