При нажатии нескольких кнопок воспроизведения и воспроизведения соответствующие песни

Question

Javascript:

function Start1() 
{ 
    var audie = document.getElementById("myAudio"); 
    audie.src = ("RWY.mp3"); 
    audie.play(); 
} 

function Start2() 
{ 
    var audie = document.getElementById("myAudio"); 
    audie.src = ("EL.mp3"); 
    audie.play(); 

HTML

<img src="images/play.png" alt="Play Button width="37" height="30" 
onclick="Start1()"> 

Я пытаюсь выбрать изображение, и как только это изображение щелкнул песня играет в соответствии с файл, описанный в элементе.

Answer 1

Возможно, у меня не возникло проблем, но почему вы создаете отдельную функцию для каждого изображения или аудио. Вы можете сделать это с помощью одной функции, а также, просто передавая источник звукового файла, как этот

function Start (audioFile) 
{ 
    var audie = document.getElementById("myAudio"); 
    audie.src = audioFile; 
    audie.play(); 
} 

разметке:

<img src="images/play.png" alt="Play Button width="37" height="30" onclick="Start('RWY.mp3')"> 

<img src="images/play.png" alt="Play Button width="37" height="30" onclick="Start('EL.mp3')"> 

Update:

function StartOrStop(audioFile) 
    { 
    var audie = document.getElementById("myAudio"); 
    audie.src = audioFile; 
    if(audie.paused==false) 
    { 
     audie.Paused(); 
    } 
    else 
    { 
     audie.play(); 
    } 
    } 

Answer 2

Try, чтобы избежать многих различных функции для той же цели. Вы можете использовать jQuery, чтобы сделать код коротким и очень простым.

$(document).ready(function() { // starting our code when document is loaded 
    $('.playbtn').click(function() { // attaching this code to click event of any html element having _playbtn_ class 
     $(this).data('song'); // getting song name from _data_ container of clicked element $(this) 
     $('#myAudio').attr('src',songFileName).play(); // getting element myAudio bi its id, then setting it's src attribute and, finally, starting playback 
    }); 
}); 

и HTML для этого будет следовать

<img src="images/play.png" class='playbtn' alt="Play Button" data-song="RWY.mp3" width="37" height="30" /> 
<img src="images/play.png" class='playbtn' alt="Play Button" data-song="EL.mp3" width="37" height="30" /> 

Теперь вам нужно добавить только один линию, чтобы добавить новую кнопку песню - просто скопировать < IMG ... /> линии, установите новый данные песня стоимость и ... wuala!