2 Replies Latest reply on Dec 6, 2012 7:49 AM by mhollis55

    Code to Click and Play Sound in HTML5

    B'Bop and Friends

      Hi,

       

      I’m creating an Animated Digital Children’s Book.  I am using Edge Animate for the presentation for viewing on Tablets and IPads.  I want to add audio .wav or .mp3 sound affects to predefined buttons “Button1, Button2…Button16” that will play when the buttons are clicked.  I know there are several ways of doing this, but the code I have tried doesn’t work or I don’t understand it.  It would be nice to have a few interactive sound affects since the product is for kids.  Does anyone have or know HTML5 or Javascript code that will work if placed in Dreamweaver?  Other suggestions are welcomed!

       

      G. Hardy

        • 1. Re: Code to Click and Play Sound in HTML5
          Jon Fritz II Adobe Community Professional & MVP

          Well, since it's a  site for kids...

           

          http://www.javascriptkit.com/script/script2/soundlink.shtml

           

          Keep in mind, you need two file types to cover all browsers (MP3 and either Ogg or Wav). Also, this will likely only work when you preview in browser not in Design or Live View depending on your version of DW.

           

          Also keep in mind that most visitors online get extremely annoyed by this type of functionality. On a site meant for adults to visit, browse and purchase goods (possibly at work), this would need at minimum a large "sound off" button that would disable all sound. Also, don't rely on the sound to tell the viewer what's happening. Some visitors won't have sound (no speakers), won't want sound (speakers turned off) or could be deaf (accessibility issues).

          • 2. Re: Code to Click and Play Sound in HTML5
            mhollis55 Level 4

            I ran into this issue with respect to .OGG Theora files (they were video, but the same applies to audio). .OGA, .OGV files may not download as binary files if your server does not understand that it is an available MIME type. Lots of Linux/Apache servers are not set up for this kind of binary file.

             

            So you may need to edit your .htaccess file thusly:

             

            AddType audio/ogg .oga

            AddType video/ogg .ogv

            AddType application/ogg .ogg

            AddHandler application-ogg .ogg .ogv .oga

             

            Also, many website control panels will allow you to add MIME types. Since Firefox won't play back an .m4v or .mp3 file (due to concerns about future requirements that the browser may need to license the codec) the Ogg MIME type must be added.