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

首先:不要使用p段落作为按钮。使用按钮或链接。

为它们提供相同的类，以便您可以同时引用它们，并在数据属性中存储对想要播放的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 2

我还没有测试过这段代码，但我认为这将如您所期望的那样工作。

//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 3

谢谢你们的帮助，我把你们俩的答案综合在一起整理了一下。

谢谢

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