Toogle icon (play/pause), and stop when another bu

问题:

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

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

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)

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

回答1:

I suppose your first code is wrong:

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
}

To toggle an image it's not nessasary to mix the code. Just call the second functions from first one with some modifications:

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

    }
}

And call it from first function:

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
}

---

Or even better - use events pause and play and do not touch play_pause function:

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

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

回答2:

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

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>

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)

This is my 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)">

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

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!

Regards

回答3:

Use this script like this so you can toggle images and stop the audio also

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