Results 1 to 4 of 4

Thread: Question about the audio property on HTML5

  1. #1
    Join Date
    Oct 2015
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default Question about the audio property on HTML5

    1) Script Title: HTML5 Mouseover/ Click sound effect

    2) Script URL (on DD): http://www.javascriptkit.com/script/....shtml#current

    3) Describe problem:
    This is my first post, so thanks in advance for your patience with me.

    I have been looking all over for a script that will do what I want it to do and this script comes the closest. I want to click on an icon (a play button png file) and have it start playing. When it starts playing, I want to have a pause icon appear. When I click it again, I want the audio file to pause and swap the image back to the original play button.

    I have been able to get the graphics to swap, but when I click the button again, it just starts replaying the audio loop instead of pausing the play - so I know I'm missing something but not sure how to write the code for it.

    This is the code so far:

    In the header I have this:
    Code:
    <! -- begin code -->
    --------------------------------------------------------------------------------------
    var html5_audiotypes={ //define list of audio file extensions and their associated audio types. Add to it if your specified audio file isn't on this list:
    	"mp3": "audio/mpeg",
    	"ogg": "audio/ogg",
    	"wav": "audio/wav"
    }
    
    function createsoundbite(sound){
    	var html5audio=document.createElement('audio')
    	if (html5audio.canPlayType){ //check support for HTML5 audio
    		for (var i=0; i<arguments.length; i++){
    			var sourceel=document.createElement('source')
    			sourceel.setAttribute('src', arguments[i])
    			if (arguments[i].match(/\.(\w+)$/i))
    				sourceel.setAttribute('type', html5_audiotypes[RegExp.$1])
    			html5audio.appendChild(sourceel)
    		}
    		html5audio.load()
    		html5audio.playclip=function(){
    			html5audio.pause()
    			html5audio.currentTime=0
    			html5audio.play()
    		}
    		return html5audio
    	}
    			
    			
    	else{
    		return {playclip:function(){throw new Error("Sorry, your browser doesn't support HTML5 audio.")}}
    	}
    }
    
    //Initialize two sound clips with 1 fallback file each:
    
    var clicksound=createsoundbite("./media/Cloudburst.mp3", "./media/Cloudburst.ogg")
    
    </script>
    ---------------------------------------------------------------------------------
    <! and then in the HTML I have this:-->
    ---------------------------------------------------------------------------------
    Code:
    <div>
        	
    <a href="#current" onclick="clicksound.playclip()">
    	<img id="myImage" onclick="changeImage()" src="./images/Play-icon.png" width="30">
    	</a>
    	
    <script>
    function changeImage() {
        var image = document.getElementById('myImage');
        if (image.src.match("Play")) {
            image.src = "./images/Pause-icon.png";
        } else {
            image.src = "./images/Play-icon.png";
        }
    }
    </script>
    </div>
    ====================================================================

    I'm just starting to do the Javascript tutorials. Thanks in advance for your help!
    Last edited by Beverleyh; 10-26-2015 at 10:08 PM. Reason: Formatting

  2. #2
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    3,033
    Thanks
    25
    Thanked 599 Times in 575 Posts
    Blog Entries
    40

    Default

    For something a teensy bit more lightweight (if you're happy to support just MP3) have a look here http://fofwebdesign.co.uk/template/_...trol-icons.htm

    Looking at the above script, looks like this resets the audio html5audio.currentTime=0 so try commenting it out. Untested - on mobile
    Focus on Function Web Design
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps

  3. The Following User Says Thank You to Beverleyh For This Useful Post:

    webbienrs (10-26-2015)

  4. #3
    Join Date
    Oct 2015
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    Thank you so much, Beverleyh, for replying so quickly!

    I commented out the currentTime line. Clicking the play icon will start the audio, but clicking again on it will do nothing but swap the icon. The clip continues to play and I want it to pause. Any ideas? Unfortunately, I have to support oggs, too, so I need to make this script work.

  5. #4
    Join Date
    Oct 2015
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    Actually, I went back again to the script you recommended and I was able to tweak it to exactly what I needed. Thank you!!

Similar Threads

  1. HTML5 background audio player
    By jundo12 in forum Dynamic Drive scripts help
    Replies: 2
    Last Post: 05-09-2014, 04:27 AM
  2. Set current time of html5 audio with link
    By windbrand in forum JavaScript
    Replies: 0
    Last Post: 03-22-2013, 12:50 AM
  3. HTML5 background audio player
    By oldmanInAz in forum Dynamic Drive scripts help
    Replies: 1
    Last Post: 06-07-2012, 08:28 PM
  4. HTML5 background audio player not working in Firefox
    By xotj123 in forum Dynamic Drive scripts help
    Replies: 9
    Last Post: 06-07-2012, 06:32 AM
  5. HTML5/JS plays only audio...
    By purmar in forum JavaScript
    Replies: 2
    Last Post: 11-24-2011, 04:41 AM

Bookmarks

Posting Permissions

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