Code for video:

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 id=”2nd_sound”>

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

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


<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;” />


And now using jQuery and modernizr

<!DOCTYPE html>



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



    $(function() {

        if ( {

            if ( {



            if ( {




        else {


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








  <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();”>




    <audio id=”myaudio”>


        function LegacyPlaySound(soundobj) {

          var thissound=document.getElementById(soundobj);




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

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








Deixa un comentari

L'adreça electrònica no es publicarà Els camps necessaris estan marcats amb *


Un bloc a XTECBlocs