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

Clicking multiple play buttons and playing the corresponding songs

本文关键字：播放 按钮 单击      更新时间：2023-09-26

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

我正在尝试选择一个图像，一旦点击该图像，就会根据元素中描述的文件播放歌曲。

也许我没有给你带来问题，但为什么你要为每个图像或音频制作单独的函数。你也可以使用单一功能，只需传递像这样的音频文件源

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

尽量避免为同一目的使用许多不同的函数。您可以使用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…/>行，设置新的数据歌曲值和。。。乌拉！

相关文章：