www.webdeveloper.com
Results 1 to 2 of 2

Thread: Help with audio play and pause using jQuery.

  1. #1
    Join Date
    May 2012
    Posts
    81

    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.

    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. #2
    Join Date
    May 2012
    Posts
    81
    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).

    Any suggestions on improving the code below is VERY WELCOME Thanks.

    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;
        });
    
    });

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

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
  •  
HTML5 Development Center



Recent Articles