Question

希望这篇文章不会翻倍，因为我已经搜索了很多同样的问题，我肯定找到了一些，但没有一个真正帮助过我。

我只需要混合＆＃39;我找到的脚本让我得到了我需要的东西，让我用我的代码更好地解释：

播放歌曲的脚本，当点击另一首歌时停止播放（但如果我点击同一个按钮则不会暂停）

 var currentsound;
function play_pause(player) {
      if(currentsound)
      {
       currentsound.pause();
      }
var myAudio = document.getElementById(player); 
myAudio.play();
currentsound = myAudio;
myAudio.currentTime = 0;
}

这是我在这里找到的另一个脚本图标：

var play = false;
function toggle() {
    var image = document.getElementById('image')
    var scan = document.getElementById('scan');
    play = !play;
    if (play) {
        image.src = "pause.png";
        scan.play();
    }
    else {
        image.src = "play.png";   
        scan.pause();
    }
}

HTML PART：

    <audio preload="none" id="myAudio2" src="rosina2.mp3" type="audio/mpeg"> </audio>
    <img src="play.png" width=30 height=30 border="0"
    onclick="play_pause('myAudio2')" id="image">

  </p></td>
  <td width="29%" class="bonuspointstyle11"><p align="center"> 2 </p></td>
  <td width="58%" class="bonuspointstyle11"><p class="bonuspointstyle5"> Istanpitta</p></td>
</tr>
<tr>
  <td width="13%" class="bonuspointstyle11"><p>


<center>

    <audio preload="none" id="myAudio3" src="rosina3.mp3" type="audio/mpeg"> </audio>
    <img src="play.png" onclick="play_pause('myAudio3')"; width=30 height=30 border="0" >
</center>

   </p></td>
  <td width="29%" class="bonuspointstyle11"><p align="center"> 3 </p></td>
  <td width="58%" class="bonuspointstyle11"><p class="bonuspointstyle5"> Gaetta </p></td>
</tr>
<tr>
  <td width="13%" class="bonuspointstyle11"><p>
<center>

    <audio preload="none" id="myAudio4" src="rosina2.mp3" type="audio/mpeg"> </audio>
    <img src="play.png" onclick="play_pause('myAudio4')"; width=30 height=30 border="0" >
</center>

  </p></td>
  <td width="29%" class="bonuspointstyle11"><p align="center"> 4 </p></td>
  <td width="58%" class="bonuspointstyle11"><p class="bonuspointstyle5">TEST </p></td>
</tr>

我希望得到一个简单的播放/暂停按钮，单击时切换（播放图像以暂停图像），如果点击任何其他按钮，则最后一个按钮停止并开始发出新声音。我如何不止一次切换？在答案中我得到了1，它包含调用我所拥有的功能，但它只与第一个按钮切换相同（即使我点击任何其他按钮）

编辑：即使有人可以告诉我如何制作一个只用于切换任意数量的按钮的脚本，我也要感激不尽

我真的非常感谢任何一种评论/建议，这些评论/建议可以让我按照自己的意愿运行我的代码。谢谢最好的问候

Answer 1

我想你的第一个代码是错误的：

var currentsound;
function play_pause(player) {
  if (currentsound) {
    currentsound.pause();
    currentsound = null;            // currentsound should be reset and return from functions to prevent playing again
    return;
  }
  var myAudio = document.getElementById(player); 
  myAudio.play();
  currentsound = myAudio;
  myAudio.currentTime = 0;
  //myAudio.play();                                   // duplicated code
}

要切换图片，混合代码并不是必需的。只需从第一个函数调用第二个函数并进行一些修改：

function toggleIcon(playing) {
    var image = document.getElementById('image')
    if (playing) {
      image.src = "play.png";
    } else {
      image.src = "pause.png";

    }
}

从第一个函数调用它：

function play_pause(player) {
  if (currentsound) {
    currentsound.pause();
    currentsound = null;
    toggleIcon(false);     // <----- toggleIcon false
    return;
  }
  var myAudio = document.getElementById(player); 
  myAudio.play();
  currentsound = myAudio;
  myAudio.currentTime = 0;
  toggleIcon(true);        // <----- toggleIcon true
}

甚至更好 - 使用事件pause和play，不要触及play_pause功能：

document.getElementById("myAudio2").onpause = function() {
    toggleIcon(false);
};

document.getElementById("myAudio2").onplay = function() {
    toggleIcon(true);
};

Answer 2

嗯，经过大量的研究，我可以得到一些东西，现在它对我来说没问题。我只是想分享，如果有其他人得到我同样的问题

这是我的脚本（我需要使用2）

    <script language="javascript">
    var currentsound;
    function play_pause(player) {
    var myAudio = document.getElementById(player);
        if(myAudio.paused) {
        myAudio.play();
        } else{
        myAudio.pause();
        }   
                                }
    function changeImage(img) {
    var imgfile = img.src.split(/\s+/).pop();   
    if (imgfile =="http://www.../.../pause.png" ) 
    {
        img.src = "http://www.../.../play.png";
    }
    else 
    {
        img.src = "http://www.../.../pause.png";
    }
                    }
</script>

基本上做的是第一个功能为每个按钮执行播放/暂停，第二个功能切换图像（参见onclick事件）

这是我的HTML：

    <audio preload="none" id="myAudio1" src="http://www.../.../Music1.mp3" type="audio/mpeg"> </audio> 
    <img src="http://www.../.../play.png" width=30 height=30 border="0"
    onclick="play_pause('myAudio1');changeImage(this)"> <!--id needs to be changed manually (id and onclick event) -->

<audio preload="none" id="myAudio2" src="http://www.../.../Music2.mp3" type="audio/mpeg"> </audio>
    <img src="http://www.../.../play.png" width=30 height=30 border="0"
    onclick="play_pause('myAudio2');changeImage(this)">

确实不是最好的解决方案，因为每次你点击另一个按钮（与正在运行的按钮不同）时，它们都会同时响起，但至少你可以单独播放/暂停每个按钮并切换图标太多。如需更多按钮，只需复制粘贴html部分并更改id部分

即可

希望对我以外的任何人都有用，如果你有一个更好的答案，比如有一个计数器变量用于输入ID，所以不需要手动更改或播放/暂停和停止任何其他按钮得到点击，发布它，将非常感谢它！

此致

Answer 3

像这样使用此脚本，以便您可以切换图像并停止音频

<script>
function audios1(img,player) {
    var image = document.getElementById(img);
    var audio = document.getElementById(player);
    var otherimage = document.getElementsByTagName('img');
        for(var i = 0, len = otherimage.length; i < len;i++){
            if(otherimage[i] != image){
            otherimage[i].src= "start4.png";
            }
        }
        if (image.src.match("start4.png")) {
            image.src = "stop.png";
            audio.play();
            } else {
        image.src = "start4.png";
            audio.pause();
            }
        audio.addEventListener("ended", function() {
            audio.currentTime = 0;
            image.src = "start4.png";
        });
        }

function audios2(img,player) {
    var image = document.getElementById(img);
    var audio = document.getElementById(player);            
    var otherimage = document.getElementsByTagName('img');
    for(var i = 0, len = otherimage.length; i < len;i++){
        if(otherimage[i] != image){
        otherimage[i].src= "start4.png";
        }
    }
    if (image.src.match("start4.png")) {
        image.src = "stop.png";
        audio.play();
    } else {
        image.src = "start4.png";
        audio.pause();
    } 
    audio.addEventListener("ended", function() {
        audio.currentTime = 0;
        image.src = "start4.png";
    });
}
document.addEventListener('play', function(e){
    var audios = document.getElementsByTagName('audio');
    for(var i = 0, len = audios.length; i < len;i++){
        if(audios[i] != e.target){
            audios[i].pause();
            audios[i].currentTime = 0;
        }
    }   
},true);
</script>

切换图标（播放/暂停），并在单击其他按钮时停止

3 个答案: