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 2 of 2
  1. #1
    New Coder
    Join Date
    Nov 2011
    Posts
    14
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Help with audio play and pause using jQuery.

    Hello,

    I am attempting to "play" and "pause" music on my page when the #startbutton is clicked ... I also have a volume button #volume that I want to use to turn the music off and on. I am using jQuery to make this possible, below is the jQuery code.

    I can also provide the HTML if need. Thank you in advance for ALL your help.


    Code:
     
    
    $(function() {
    
        //
     	var $volume = $( '#startbutton' );
        var $fsound =  $('#fsound');
        $fsound.hide();
        buzz.defaults.formats = [ 'ogg', 'mp3' ];
        
    
    	//
    	var s = null,
    	
    	AnimationSpace = {
    		settings: {
    			startButton: $("#startbutton");
    
    		},
    		
    		init: function() {
    			s = this.settings;
    			this.startAnimation();
    		},
    		
    		startAnimation: function () {
    			s = this.settings;
    			
    			s.startButton.click(function() {
    				$("div.target").toggleClass("animate");
    				if (s.startButton.attr("value") === "ANIMATE THE SCENE") {
    					s.startButton.attr("value", "RESET THE ANIMATION");				
    				} else {
    					s.startButton.attr("value", "ANIMATE THE SCENE");	
    				}
    				
    				//
    			var Sound = new buzz.sound( 'audio/birthday' );
    				if ( !buzz.isSupported() ) {
          				$volume.hide();
            			$fsound.visible();   
        			}else{
        				Sound.loop().play().fadeIn( 5000 );
    				}
    	
       			 $volume.click( function() {
            		if ( $( this ).hasClass( 'all' ) ) {
                 		Sound.mute();
                 $( this ).removeClass( 'all' ).addClass( 'none' );
            		} else if ( $( this ).hasClass( 'none' ) ) {
               			Sound.unmute();
                 $( this ).removeClass( 'none' ).addClass( 'all' );
           			}
            		return false;
        		});	
    				//
    				
    				
    			});
    		}
    
    	};
    
    	AnimationSpace.init();
    });

  • #2
    New Coder
    Join Date
    Nov 2011
    Posts
    14
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Solution to the problem

    I was able to put together a solution for the problem I was having... still a few bugs but in case anyone else runs into this problem. Here is the working code (with minor bugs).


    Code:
    $( function() {
        var $volume = $( '#volume' );
        var $start = $('#startbutton');
           
        buzz.defaults.formats = [ 'ogg', 'mp3' ];
    
        var Sound = new buzz.sound( 'audio/birthday' );
            
    $start.click(function(){
        if ( !buzz.isSupported() ) {
                       
        }else{
        
        Sound.play().fadeIn( 5000 );
    	}
        });
        // Volume button
    
        $volume.click( function() {
            if ( $( this ).hasClass( 'all' ) ) {
                 Sound.mute();
             
                $( this ).removeClass( 'all' ).addClass( 'none' );
            } else if ( $( this ).hasClass( 'none' ) ) {
               
                Sound.unmute();
            
                $( this ).removeClass( 'none' ).addClass( 'all' );
            }
            return false;
        });
    
    });


  •  

    Tags for this Thread

    Posting Permissions

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