Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    New to the CF scene
    Join Date
    Sep 2012
    Location
    Buffalo
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Arrow One sound at a time -- HTML5 Audio

    Hello,

    I am having trouble getting my audio to stop playing when I perform a second action.

    Here is my html code:


    Code:
    <img src="picture1.png" style="cursor:pointer" onClick="chooseSound(0,0)">
    <br /> <br /> <br />
    <img src="picture2.png" style="cursor:pointer" onClick="chooseSound(0,1)">
    And my javascript code is:

    Code:
    
    function chooseSound(first, second)
    {
     	setTimeout("stopallSounds()",1);
     	for (var i=0; i < DemoSounds.length; i++)
    	{
     		if ( DemoSounds[i].index0==first && DemoSounds[i].index1==second )
    		{
     			playthisSound(DemoSounds[i].id);
    		}
    	}
    }
    
    
    function stopallSounds()
    {
     	for (var i=0; i < DemoSounds.length; i++)
    	{
     		stopthisSound(DemoSounds[i].id)
    	}
    }
    
    function stopthisSound(someSound)
    {
        var mysound = document.getElementById(someSound);
        mysound.currentTime = 0;
        mysound.pause();
    }
    
    function playthisSound(someSound)
    {
        var mysound = document.getElementById(someSound);
        mysound.load();
        mysound.play();
    }
    The array in question is given by:

    Code:
    var DemoSounds = 
    [{ "index0" : "0" , "index1" : "0", "id" : "Audio00" },		
    { "index0" : "0" , "index1" : "1", "id" : "Audio01" },
    { "index0" : "0" , "index1" : "2", "id" : "Audio02" },
    { "index0" : "0" , "index1" : "3", "id" : "Audio03" },
    { "index0" : "1" , "index1" : "0", "id" : "Audio10" },
    { "index0" : "1" , "index1" : "1", "id" : "Audio11" },
    { "index0" : "1" , "index1" : "2", "id" : "Audio12" },
    { "index0" : "1" , "index1" : "3", "id" : "Audio13" },];
    All the IDs are defined in a separate file called audio html that I include using php. The problem is that while I can click on each image and play their respective audio, it doesn't necessarily stop the other audio from playing. Also, for some reason, I can't call stopallSounds() without putting it in a Timeout.

    What am I doing wrong? How can I improve it? I don't want to use jQuery, or else I would have posted this question there!

    Thanks everyone!

  • #2
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,932
    Thanks
    56
    Thanked 552 Times in 549 Posts
    there is, I imagine, some <audio> element that is playing the sound.

    generally the way to go here is to give that audio element an ID, use the .pause() method, assign it a new src (for the sound that you now want to play) and start playback again with .play()

    but it seems as if you have multiple <audio> tags? why?

  • #3
    New to the CF scene
    Join Date
    Sep 2012
    Location
    Buffalo
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by xelawho View Post

    but it seems as if you have multiple <audio> tags? why?
    Well, this is really just a test page for a larger site.

    The larger site is a single container, with two columns. Each column has content loaded into it by the user pressing buttons, consisting of differing amounts of text and pictures.

    Depending on what picture, AND the content around it, when the user clicks on the picture, a specific audio sequence needs to play.

    Thus, if the user loaded the first batch of content in the right column, and is playing audio, but in the middle decides to load the second...the audio from the first still plays and I want it to stop instead.

    But I don't know if that's a valid reason for having multiple audio tags. It was just an easy way to keep everything straight when I was building everything...

  • #4
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,932
    Thanks
    56
    Thanked 552 Times in 549 Posts
    mmm...

    but equally. the audio tag exists independently of the pictures or text or whatever that is used to trigger playback. Maybe I'm being thick, but I still can't see why you need multiple audio tags when you can just have all your onclicks pointing towards one element.

    anyway. I was just looking at this and it seems there is another step in the process from what I described above:
    If you have changed the src attribute of the media element since the page was loaded, you must call load() before play(), otherwise the original media plays again.
    if you really do need to go down the multiple audio tags road, I would suggest setting a variable that "remembers" which element was the last one played, then calling pause on that one before beginning playback on the new one.

  • #5
    New to the CF scene
    Join Date
    Sep 2012
    Location
    Buffalo
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by xelawho View Post
    mmm...

    but equally. the audio tag exists independently of the pictures or text or whatever that is used to trigger playback. Maybe I'm being thick, but I still can't see why you need multiple audio tags when you can just have all your onclicks pointing towards one element.

    if you really do need to go down the multiple audio tags road, I would suggest setting a variable that "remembers" which element was the last one played, then calling pause on that one before beginning playback on the new one.
    Okay. So, what your saying is, I need to have only ONE audio element, and depending on what the user clicks, change the src of the element, reload, set time to zero, then play?

    So, I will put the src into the "id:" spot instead, and then simply call the audio element a second time (with a new src now). Hopefully, this second call will halt the first audio from playing?

    I think I was being thick by defining multiple audio tags before....

    But if I did continue down the multiple audio tag route...shouldn't what I had above do the same thing as having memory? (ie stopping everything regardless?)

  • #6
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,932
    Thanks
    56
    Thanked 552 Times in 549 Posts
    For one audio element I would say the process would be:
    - .pause() the element
    - change the source
    - .load() the element
    - .play() the element

    I doubt that setting time to zero is as important as stopping playback of the previous sound.

    Looking at your code, it would seem that it should stop everything from playing. Dunno why it doesn't.

    If it gets really confusing, try taking the code back to basics and building it up from there.

  • #7
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,302
    Thanks
    10
    Thanked 586 Times in 567 Posts
    simply stop them all before you play the new one...

    Code:
    function stopAllAudio(){
      [].slice.call(document.getElementsByTagName("audio")).map(a){
        a.pause();
     });
    }
    Last edited by rnd me; 09-26-2012 at 01:16 AM.
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/5/28) IE7:0.1, IE8:5.3, IE11:8.4, IE9:3.2, IE10:3.2, FF:18.2, CH:46, SF:7.9, NON-MOUSE:32%


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •