JavaScript

Code for video: http://tecnologies.net/wp-content/uploads/2013/10/jquery_ui_using_html5_480x360.mp4 Here you will have examples of html5 code starting with a sound and image map

<audio id=”1st_sound”>

    <source src=”1st_sound.ogg” type=”audio/ogg” />

    <source src=”1st_sound.mp3″ type=”audio/mpeg” />

</audio>

<audio id=”2nd_sound”>

    <source src=2nd_sound.ogg” type=”audio/ogg” />

    <source src=”2nd_sound.mp3″ type=”audio/mpeg” />

</audio>

<img src=”http://website_path/image.jpg” width=”350″ height=”312″ usemap=”#my_image” />

<map name=”my_image”> <area shape=”rect” coords=”20,65,50,95″ onClick=”document.getElementById(‘1st_sound’).play(); return false;” />

    </map>

And now using jQuery and modernizr

<!DOCTYPE html>

<html> 

<head>

<title>Play Audio</title>

<script src=”script/jquery-1.6.2.min.js” type=”text/javascript”></script>

<script src=”script/modernizr-latest.js” type=”text/javascript”></script>

<script type=”text/javascript”>

    var currentFile = “”;

    function playAudio() {

 

        var oAudio = document.getElementById(‘myaudio’);

        // See if we already loaded this audio file.

        if ($(“#audiofile”).val() !== currentFile) {

            oAudio.src = $(“#audiofile”).val();

            currentFile = $(“#audiofile”).val();

        }

            var test = $(“#myaudio”);

            test.src = $(“#audiofile”).val();

        oAudio.play();  

    }

   

    $(function() {

        if (Modernizr.audio) {

            if (Modernizr.audio.wav) {

                $(“#audiofile”).val(“sounds/sample.wav”);

            }

            if (Modernizr.audio.mp3) {

                $(“#audiofile”).val(“sounds/sample.mp3”);

            }

        }

        else {

          $(“#HTML5Audio”).hide();

          $(“#OldSound”).html(‘<embed src=”sounds/sample.wav” autostart=false width=1 height=1 id=”LegacySound” enablejavascript=”true” >’);

        }

 

    });

</script>

</head>

 

<body>

  <div style=”text-align: center;”>

    <h1>Click to Play Sound<br /></h1>

    <div id=”HTML5Audio”>

    <input id=”audiofile” type=”text” value=”” style=”display: none;”/><br />

 

    <button id=”play” onclick=”playAudio();”>

        Play

    </button>

    </div>

    <audio id=”myaudio”>

        <script>

        function LegacyPlaySound(soundobj) {

          var thissound=document.getElementById(soundobj);

          thissound.Play();

        }

        </script>

        <span id=”OldSound”></span>       

        <input type=”button” value=”Play Sound” onClick=”LegacyPlaySound(‘LegacySound’)”>

    </audio>

 

</div>

 

</body>

</html>

 

Leave a Reply

The best way to predict the future is to invent it (Alan Kay)