切换图标 (play/pause)，并在单击另一个按钮时停止

Question

希望这个 post 没有翻倍，因为我搜索了很多相同的问题，我确实找到了一些，但其中 none 确实帮助了我。

我只需要 'mix' 我找到的脚本，这样我就能得到我需要的东西，让我用我的代码更好地解释一下：

用于播放歌曲并在单击另一首时停止的脚本（但如果我单击同一按钮则不会暂停）

 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 部分：

    <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>

我希望得到一个简单的 play/pause 按钮，当点击时切换（播放图像当然是暂停图像），如果点击任何其他按钮，最后一个按钮将停止并开始播放新按钮. 我怎样才能多次切换？在答案中，我得到了 1，它涉及调用我拥有的功能，但它只与第一个按钮切换相同（即使我点击了任何其他按钮）

编辑：即使有人能告诉我如何制作一个脚本来只切换您拥有的任意数量的按钮，我也将不胜感激

我真的很感激任何一种 comment/advice 让我得到我想要的代码运行。谢谢最好的问候

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>

基本上做的是第一个函数为每个按钮做一个 play/pause，第二个函数切换图像 （参见 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)">

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

Hope 对除我以外的任何人都有用，如果您得到更好的答案，例如将计数器变量放入 ID，则无需手动更改或 playing/pause 并在任何时候停止其他按钮得到点击，post 它，将不胜感激！

此致

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>

切换图标 (play/pause)，并在单击另一个按钮时停止

Toogle icon (play/pause), and stop when another button is clicked

html

javascript

toggle

html5-audio