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 4 of 4
  1. #1
    Regular Coder
    Join Date
    Aug 2010
    Posts
    405
    Thanks
    17
    Thanked 2 Times in 2 Posts

    javascript toggle for music

    I've got a simple toggle function for music that is playing when a page loads. The user can press the "music off" button, and it clears out the div. If they press "music on" to bring the music back, i get the "your browser doesn't support audio" message. Which is odd... considering it was just playing???

    Here's the html:
    Code:
    <div id="music">
    
    <audio autoplay loop> 
       <source src="http://site.com/music/0132.ogg" type="audio/ogg" />
       <source src="http://site.com/music/0132.mp3" type="audio/mpeg" />
        Your browser does not support the audio element.
    </audio>
    
    </div>
    <a href="#" id="music_control" class="">MUSIC OFF</a>
    and here's the javascript:
    Code:
    $(document).ready(function() {
    
    	var playing = true;
    
    	$("#music_control").click(function(){
     
      		if (playing == false) {
      		playing = true;
            
              $('#music').html("  <source src='http://site.com/music/0132.ogg' type='audio/ogg' /><source src='http://site.com/music/0132.mp3' type='audio/mpeg' />Your browser does not support the audio element. ");
              $("#music_control").text("MUSIC OFF"); 
    
            } else if (playing == true) {
    	      playing = false;
            
    	      $('#music').html("<!-- music -->");
    	      $("#music_control").text("MUSIC ON"); 
             
    	    } 
          }); 
    });

  • #2
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,184
    Thanks
    10
    Thanked 569 Times in 550 Posts
    how about using $('audio')[0].pause() ?
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/1/19) IE7:0.2, IE8:6.7, IE11:7.4, IE9:3.8, IE10:4.4, FF:18.3, CH:43.6, SF:7.8, MOBILE:27.5

  • #3
    Regular Coder
    Join Date
    Aug 2010
    Posts
    405
    Thanks
    17
    Thanked 2 Times in 2 Posts
    hmmmm...


    ok, I tried this. It turns off the music, but won't turn it back on.

    At least I don't get the "unsupported " error message though.

    Here's what I have:
    Code:
    $('#music_control').click(function(){
        if (!$("#song").paused)
                        {
                            $("#song")[0].pause();           
                            $("#music_control").text("MUSIC ON");
                        } else {
                            $("#song")[0].play();           
                            $("#music_control").text("MUSIC OFF");
                        }
        });

  • #4
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,184
    Thanks
    10
    Thanked 569 Times in 550 Posts
    if (!$("#song").paused) is always true, don't forget the [0]...
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/1/19) IE7:0.2, IE8:6.7, IE11:7.4, IE9:3.8, IE10:4.4, FF:18.3, CH:43.6, SF:7.8, MOBILE:27.5


  •  

    Posting Permissions

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