해당 노래

Question

자바 스크립트 복수의 플레이 버튼을 클릭하고 재생 :

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')"> 

업데이트 : 다른 많은 것을 피하기 위해

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

Answer 2

시도 같은 목적을위한 기능. jQuery을 사용하면 코드를 간단하고 간단하게 만들 수 있습니다. 단지 설정, < IMG ... /> 라인을 복사 - 이것에 대한

$(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" /> 

을 다음됩니다 새로운 데이터 노래 가치 및 ... wuala!