在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音頻標籤

回答

相關問題