Playing sounds on clicking within image – upgrading to html5?

  • Resolved deadpeasant

    (@deadpeasant)


    11 years, 10 months ago

    My posts sometimes feature images where clicking in different places plays different sounds, e.g. the symbols in the first picture here:
    https://englishspeechservices.com/blog/cardinal-vowels-ear-training-and-quiz/
    Apparently they don’t play on iPads etc. Can anyone please help me to upgrade my method, which I cobbled together some time ago and is shown below? If anyone can help, please be as explicit as possible about where I put various bits of code, whether in posts or in .php files etc. (I have tried to follow various methods online and can’t get them to work.) Many many thanks.

    I have this at the top of my posts

    <script language="javascript" type="text/javascript">
function playSound(soundfile) {
document.getElementById("dummy").innerHTML=
"<embed src=\""+soundfile+"\" hidden=\"true\" autostart=\"true\" loop=\"false\" />";
}</script><span id="dummy"></span>

    Then I put this at the relevant place in the post:

    <img src="https://website_path/image.jpg"  width="350" height="312" usemap="#my_image" />
<map name="my_image">
<area shape="rect" coords="20,65,50,95" onclick="playSound('https://website_path/sound.mp3');"  /></map>

Viewing 1 replies (of 1 total)
  • Thread Starter deadpeasant

    (@deadpeasant)

    I found the solution in this self-answer by ergo:
    https://stackoverflow.com/questions/14596082/innerhtml-causes-unwanted-scroll-in-chrome

    The first of my bits of code should be replaced with:

    <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>

    etc.

    The second bit should be replaced with:

    <img src="https://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>

    etc.

Viewing 1 replies (of 1 total)
  • The topic ‘Playing sounds on clicking within image – upgrading to html5?’ is closed to new replies.