从 js/jquery 中的对象数组播放音频文件

Posted 2023-02-25

【中文标题】从 js/jquery 中的对象数组播放音频文件

【英文标题】：Playing audio files from object array in js/jquery

【发布时间】：2013-12-21 14:22:32

【问题描述】：

我正在制作一个对象来围绕 html5 音频元素的实例包装控件。为了测试，我做了一个这样的对象（为了便于阅读而简化）..

function AudioObject(audio) 
    var innerAudio = audio;

    this.Play = function () 
        innerAudio.play()
    

我有一个包含此 AudioObject 实例的数组。

var AudioObjects = [];

然后，当创建新的 AudioObjects 时，我将它们添加到数组中。我有一个函数可以延迟播放 AudioObjects，以便它们按顺序播放。像这样的：

var audioObj = new AudioObject(audio);
AudioObjects.push(audioObj);
....
....
var delay = 0;
$.each(AudioObjects, function(iterator, obj) 
    setTimeout(obj.Play, delay);
    delay = delay + 3000;

当只有一个音频文件时，它可以正常播放，但是一旦我添加了更多 AudioObjects，数组中的每个文件都会将它们的 innerAudio 变量设置为最新创建的 Audio 元素。我可以从 html 中单独播放每一个。我在创建时进行了调试，我可以看到它正在设置正确的音频，但是在被推送到数组后，数组中的对象都被切换到了最新的 innerAudio。

我没有正确实例化我的对象吗？我制作了this jsfiddle 来试验警报文本，它似乎没有我遇到的问题。

更新：我想我找到了我的问题。这就是我认为您在对象内部编写“公共”和“私有”函数的方式。

function Thing(test) 
    var thingTest = test;

    // Public function
    this.PublicTest = function () 
        setTimeout(Test, 1000);
    

    // Private function
    PrivateTest = function () 
       alert(thingTest);
    

这基本上是我的代码的结构方式，但是“私有”函数的范围与公共函数的范围不同。我仔细检查了我的数组，它实际上是用正确的音频源保存了正确的音频对象，但是在运行调用“私有”函数的函数时，它调用了错误的音频文件。

我已更新 the jsfiddle 以显示正在发生的事情。我以为它会提醒“test1”然后是“test2”，但它会提醒“test2”两次。

更新 2：为了记录，将私有函数更改为此修复了问题：

function Play()    // <<< That's all I had to change!
    innerAudio.play()

【参考方案1】：

您是否为每个音频包装器创建唯一的音频对象？

var audio = new Audio();
audio.src = 'src';

var audioObj = new AudioObject(audio);
AudioObjects.push(audioObj);

【讨论】：

我很确定我是。这是制作新 AudioObject.. var recObj = new AudioObject(0, audio.duration, audio);在创建对象时，“音频”指的是与我的 AudioObjects 数组中的 AudioObject 不同的 src。一旦我推送了这个新对象，数组中的对象就会发生变化。

啊！我发现了我的问题！！我正在更新我原来的帖子。