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

更新

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

Answer 2

尽量避免为同一目的使用许多不同的功能。您可以使用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" />

从现在起，您只需要添加一个行来添加新的歌曲按钮 - 只需复制＆lt; img ... /＆gt; line，设置新的数据歌曲值和... wuala！

单击多个播放按钮并播放相应的歌曲

2 个答案: