2013-03-23 204 views
0

的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()"> 

我想選擇一個圖像,只要該圖像被點擊一首歌根據播放元素中描述的文件。

+0

問題是什麼? – JJJ 2013-03-23 10:51:00

回答

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(); 
    } 
    } 
+0

哦謝謝,似乎已經完成了這個伎倆。是否有可能暫停當前歌曲,並且當我暫停另一個圖像(暫停圖像)取代該播放時? – user2202031 2013-03-23 11:18:11

+0

是的,你可以使用'audie.pause()'方法來暫停歌曲,就像你使用'audie.play()' – Sachin 2013-03-23 11:22:44

+0

播放那首歌曲一樣,我怎樣才能使用同樣的按鈕。例如,當歌曲播放時點擊並暫停,當再次點擊。感謝您的幫助! – user2202031 2013-03-23 11:34:25

0

儘量避免有許多不同功能出於同樣的目的。您可以使用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!