TechCentral TechCentral - 6 months ago 12
CSS Question

How can i make an image so i can click on it and it plays a sound

I'm trying to make a picture that plays a .wav file once i click on it sort of like this http://www.nooooooooooooooo.com/

(Please excuse the meme)

Here is my current setup



<!doctype html>
<html>
<head>
<title>xxx</title>
<meta charset="utf-8">
<link href="main.css" rel="stylesheet" type="text/css">
</head>

<body>
<header>
<nav>
<h1> My Projects </h1>
<ul>
<li><a href="Homepage.html">Home</a></li>
<li><a href="#">Memes</a></li>
</ul>
</nav>
</header>
<main>
<p>This is a page for Dank Memes.</p>
<img src="meme1.jpg" width="600" height="420" alt=""/> <img src="meme2.jpg" width="500" height="390" alt=""/>
<img src="meme3.jpg" width="600" height="420" alt=""/> <img src="meme4.jpg" width="600" height="432" alt=""/>
<img src="tupac.png" width="600" height="420" alt=""/>
<script>



</script>
</main>
<footer>
<p> Made By xxx </p>
</footer>
</body>
</html>





Thanks for any help you can give.

Answer

The answer is in this snippet of their source code:

<div class="darthvadernobutton">
        <audio id="nooo">
            <source src="nooo.ogg" type="audio/ogg" />
            <source src="nooo.mp3" type="audio/mpeg" />
            <source src="nooo.mp4" type="audio/mp4" />
            <script language="javascript">
                if (AC_FL_RunContent == 0) {
                    alert("This page requires AC_RunActiveContent.js.");
                } else {
                    AC_FL_RunContent(
                        'codebase', 'http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0',
                        'width', '550',
                        'height', '400',
                        'src', 'button',
                        'quality', 'high',
                        'pluginspage', 'http://www.macromedia.com/go/getflashplayer',
                        'align', 'middle',
                        'play', 'true',
                        'loop', 'true',
                        'scale', 'showall',
                        'wmode', 'window',
                        'devicefont', 'false',
                        'id', 'button',
                        'bgcolor', '#ffffff',
                        'name', 'button',
                        'menu', 'true',
                        'allowFullScreen', 'false',
                        'allowScriptAccess','sameDomain',
                        'movie', 'button',
                        'salign', ''
                        ); //end AC code
                }
            </script>
            <noscript>
                <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0" width="550" height="400" id="button" align="middle">
                <param name="allowScriptAccess" value="sameDomain" />
                <param name="allowFullScreen" value="false" />
                <param name="movie" value="button.swf" /><param name="quality" value="high" /><param name="bgcolor" value="#ffffff" />  <embed src="button.swf" quality="high" bgcolor="#ffffff" width="550" height="400" name="button" align="middle" allowScriptAccess="sameDomain" allowFullScreen="false" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
                </object>
            </noscript>
        </audio>
        <div>
            <button id="no-button"></button>
            <script>
                var a = document.createElement('audio');
                canAudio = !!(a.canPlayType && (a.canPlayType('audio/mpeg;') || a.canPlayType('audio/ogg;') || a.canPlayType('audio/mp4;')));
                if(!canAudio)
                    document.getElementById('no-button').style.display = 'none';

                document.getElementById('no-button').onclick = function(){
                    document.getElementById('nooo').play();
                }
            </script>
        </div>

Especially this bit:

<div>
        <button id="no-button"></button>
        <script>
            var a = document.createElement('audio');
            canAudio = !!(a.canPlayType && (a.canPlayType('audio/mpeg;') || a.canPlayType('audio/ogg;') || a.canPlayType('audio/mp4;')));
            if(!canAudio)
                document.getElementById('no-button').style.display = 'none';

            document.getElementById('no-button').onclick = function(){
                document.getElementById('nooo').play();
            }
        </script>
    </div>
Comments