在JavaScript中使用HTML5音频标签

我想为使用HTML，CSS和JavaScript的16个音频文件的网格设置音频链接。这个想法是指向网格中每个框中的单独音频文件的链接。在JavaScript中使用HTML5音频标签

我认为使用表格可能会为此工作，并已创建一个与HTML/CSS。我用TD细胞如下：

<td id="A" class="squareA" type="button";><audio src="music/work_it.wav">Work It</td>

然后我试图建立事件监听器/使用的getElementsByTagName JS如下但坐进右老糊涂。如果有人能给我任何指点，我会非常感激！

document.addEventListener("DOMContentLoaded", function(event)){ 
var audio = document.getElementsByTagName('audio')[0]; 

    workit.addEventListener('click' function());

来源

2016-01-25 Andy83

对不起，作为一个例子（对于16的1）我使用的表格HTML代码是

您可能需要针对每个td内audio标签，但至今都没有唯一的标识符，以帮助该任务。一个小的除了你的代码可以解决这个...

<td id="A" class="squareA" type="button";> 
    <audio id="audio-A"> 
    <source src="music/work_it.wav" type="audio/wav"> 
    </audio> 
    Work It 
</td>

现在，您可以通过特定的id找到每个标记。

但是，如果您只需在audio标记中允许controls，用户将能够单击默认浏览器播放器并播放该文件，而无需任何其他代码。

<audio controls> 
    <source ... etc 
</audio>

但是，如果controls不存在（或设置为controls="false"）默认浏览器播放器将不会出现。我认为这是你所追求的，因为你正在寻找通过点击事件播放音频文件。因为没有controls没有被显示在浏览器点击，在这种情况下你需要针对表中所有包含他们的td标签

音频标签id s为不一定有帮助，在这一点上。

如果您还没有这样做的话添加id属性，则音频表（如：“音表”），那么你可以.addEventListener()与一个叫页面加载功能，每个TD-盒;像...

function addEvents2Table() { 
    /* presuming the table has an 
    id of 'audio-table' here */ 
    var audioTable = document.getElementById('audio-table'); 

    /* td tag collection */ 
    var tdTags = audioTable.getElementsByTagName('td'); 
    var len = tdTags.length; 

    /* add a 'playAudio' function call 
    to each td when clicked */ 
    while(len--) { 
    tdTags[len].addEventListener(
     'click', playAudio, false 
    ); 
    } 
} 

/* call 'addEvents2Table()' on page load */ 
window.onload = function() { 
    addEvents2Table(); 
};

现在，当表中的一个td被点击playAudio()功能将闪光。现在所需要的就是这个功能。这是关注html标记真正帮助的地方。

在上面的第一个代码示例中，我将id="audio-A"添加到td-tag中的音频标签。 'A'（或'B'或'C'等）现在可以非常方便地使用。

function playAudio(event) { 
    /* get the 'id' of the clicked element */ 
    var tagID = event.target.id; 

    /* add it to 'audio-' */ 
    var audioID = 'audio-' + tagID; 

    /* target the corresponding audio tag */ 
    var audioTAG = document.getElementById(audioID); 

    /* play the file */ 
    audioTAG.play(); 
}

还有其他的事情需要考虑。你想让浏览器同时播放音频文件吗？你希望用户能够停止音频剪辑吗？现在我们已经可以快速连续点击所有框，浏览器会尝试播放所有音频文件。另外，如果您在播放音频文件时单击一个框，则会引发一些问题。

不过，这应该足以让你开始。请评论，如果你需要进一步澄清。

与此同时，这里的MDN's audio-tag page作为参考。

来源

2016-01-26 00:01:47

非常感谢Brian - 我会尝试按照你的建议添加这些位，这是一个巨大的帮助:-) – Andy83

@ Andy83没有probs。如果您需要，请回复并发表评论;-) –

在JavaScript中使用HTML5音频标签

回答

相关问题