Toogle图标（播放/暂停），并在单击其他按钮时停止 [英] Toogle icon (play/pause), and stop when another button is clicked

问题描述

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

Hope this post is not doubled, since i've search a lot for my same question and i surely found some but none of them really helped me.

I只需要'混合'我发现的脚本，所以我得到我需要的东西，让我用我的代码更好地解释：

I just need to 'mix' the scripts i found so i get what i need, let me explain better with my code:

播放歌曲的脚本，当另一个是点击（但如果我点击相同的按钮则没有暂停）

Script for play a song and stop when another is clicked (but no pause if i click the same button)

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

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

And this is another script i found here for toogle the icon :

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：

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，它包含调用我所拥有的功能，但它只与第一个按钮切换相同（即使我点击任何其他按钮）

Im looking to get a simple play/pause button that toggle when clicked (to play image to pause image of course) and if any other button is clicked the last one gets stopped and start to sound the new one. How can i toggle for more than once? In the answer i've got 1 which envolve calling the fuction i have but it's the same as only the first button toggle (even when i clicked on any other button)

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

Even if anybody can tell me how to make a script for only toggling any amount of buttons you have indiviually, i'd be grateful

我真的很感激任何形式的评论/建议，让我按我的意愿运行我的代码。谢谢
祝你好运

I'd really really appreciate any kind of comment/advice that lead me to get my code running as i want. Thanks Best regards

推荐答案

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

Well, after a lot of research i could get something that for now it's ok for me. I just want to share if anybody else gets my same problem

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

This are my scripts (i needed to use 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事件）

And what basically do is that the first function do a play/pause for each button, and 2nd function toggle the image (see the onclick event)

这是我的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部分

Indeed is not the best solution, because every time you click on another button (different from the one is running) them both will sound at same time, but at least you can play/pause each button individually and toggle the icons too. For more button just copy-paste the html part and change the id part

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

Hope is usefull for anyone else than me, and if you got a better answer like having a counter variable for put into the ID so don't need to be changed manually or playing/pause and stopping when any other button gets click, post it, will be very appreciate it!

问候

这篇关于Toogle图标（播放/暂停），并在单击其他按钮时停止的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！