HTML5音頻/ jquery /格式

Question

我寫了一些jquery，它工作正常，我只是不確定它的最佳做法，我相信我可以用少JS來做到這一點，我有一個租約寫一切，而不是寫最佳實踐。

下面的HTML和JQuery根據按下哪個按鈕來播放相關的聲音文件。

有沒有真正削減寫了這麼多的JS

的方式

$(document).ready(function(){ 
    var buttonC = document.getElementById('buttonC'); 
    var buttonJ = document.getElementById('buttonJ'); 
    var buttonD = document.getElementById('buttonD'); 
    var buttonT = document.getElementById('buttonT'); 
    var buttonE = document.getElementById('buttonE'); 

    var audioC = document.getElementById('c'); 
    var audioJ = document.getElementById('j'); 
    var audioT = document.getElementById('d'); 
    var audioD = document.getElementById('t'); 
    var audioE = document.getElementById('e'); 

    var onClickC = function() { 
    audioC.currentTime = 0; 
    audioC.play(); 
    }; 

    var onClickJ = function() { 
    audioJ.currentTime = 0; 
    audioJ.play(); 
    }; 

    var onClickD = function() { 
    audioD.currentTime = 0; 
    audioD.play(); 
    }; 

    var onClickT = function() { 
    audioT.currentTime = 0; 
    audioT.play(); 
    }; 

    var onClickE = function() { 
    audioE.currentTime = 0; 
    audioE.play(); 
    }; 

    buttonC.addEventListener('click', onClickC, false); 
    buttonJ.addEventListener('click', onClickJ, false); 
    buttonD.addEventListener('click', onClickD, false); 
    buttonT.addEventListener('click', onClickT, false); 
    buttonE.addEventListener('click', onClickE, false); 

}); 

HTML：

<audio id="c" preload="auto"> 
    <source src="audio/c.mp3" type="audio/mpeg" /> 
    <source src="audio/c.ogg" type="audio/ogg" /> 
    Your browser does not support HTML5 audio. 
</audio> 
<audio id="j" preload="auto"> 
    <source src="audio/j.mp3" type="audio/mpeg" /> 
    <source src="audio/j.ogg" type="audio/ogg" /> 
    Your browser does not support HTML5 audio. 
</audio> 
<audio id="d" preload="auto"> 
    <source src="audio/d.mp3" type="audio/mpeg" /> 
    <source src="audio/d.ogg" type="audio/ogg" /> 
    Your browser does not support HTML5 audio. 
</audio> 
<audio id="t" preload="auto"> 
    <source src="audio/t.mp3" type="audio/mpeg" /> 
    <source src="audio/t.ogg" type="audio/ogg" /> 
    Your browser does not support HTML5 audio. 
</audio> 
<audio id="e" preload="auto"> 
    <source src="audio/e.mp3" type="audio/mpeg" /> 
    <source src="audio/e.ogg" type="audio/ogg" /> 
    Your browser does not support HTML5 audio. 
</audio> 

<p id="buttonC" class="c">C</p> 
<p id="buttonJ" class="j">J</p> 
<p id="buttonD" class="d">D</p> 
<p id="buttonT" class="t">T</p> 
<p id="buttonE" class="e">E</p> 

Answer 1

我還沒有測試此代碼，但我認爲這將作爲你的預期。

//On click of all p 
$('p').on('click',function(){ 
    //creating the selecter element for the audio 
    var elementId = '#'+ $(this).attr('class'); 
    $(elementId).currentTime = 0; 
    $(elementId).play(); 

}); 

Answer 2

首先：不要使用p aragraphs按鈕。使用按鈕或鏈接。

給它們所有相同的分類，以便您可以同時參考它們，並存儲對想要在數據屬性中播放的audio元素的引用。例如：

<button class="play-audio" data-audio="#c">C</button> 
<button class="play-audio" data-audio="#j">D</button> 
<!-- etc. --> 

指定一個單一的事件處理程序的所有按鈕（僅適用於當前的瀏覽器支持getElementsByClassName，但所有支持<audio>做）：

(function() { // Annonymous Function to avoid filling the global namespace with variables 
    var buttons = document.getElementsByClassName('play-audio'); 
    for (var i = 0, len = buttons.length; i < len; i++) { 
    buttons[i].addEventListener('click', function(e) { 
     var thisButton = e.target; 
     var audioId = thisButton.getAttribute('data-audio'); 
     var audio = document.getElementById(audioId); 
     audio.currentTime = 0; 
     audio.play(); 
    }, false); 
    } 
)(); 

（未經測試，但應該工作。）

Answer 3

謝謝你們兩位的幫助，我用下面這兩個你的答案混合起來。

謝謝

$('.play-audio').on('click',function(){ 
    var audioId = $(this).attr('data-audio'); 
    var audio = document.getElementById(audioId); 
    audio.load(); 
    audio.play(); 
});