CODEWITHSUNDEEP
javascripthtml
m0onio
m0onio

Reputation: 213

Embedding sound into my website

Why can't I put my own recorded sounds in my website...

file:///C:/Users/smilburn/Desktop/bug.wav

I have tried this...

<li data-word="bug" data-audio="file:///C:/Users/smilburn/Desktop/bug.wav" data-pic="http://pixabay.com/static/uploads/photo/2012/04/16/12/17/black-35741_640.png"></li>

Upvotes: 0

Views: 108

Answers (4)

Michael Besteck
Michael Besteck

Reputation: 2423

You can play the sound files using the HTML5 audio element:

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script type="text/javascript">
        function playSound(urlOfSoundfile) {
            document.getElementById("audioPlay").src=urlOfSoundfile;
            document.getElementById("audioPlay").autoplay="autoplay";
        }
    </script>
</head>
<body>
    <ul>
        <li onclick="playSound('http://www.wav-sounds.com/various/beep.wav')">Click here to play sound from www</li>
        <li onclick="playSound('file:///C:/Users/smilburn/Desktop/bug.wav')">Click here to play sound from local file</li>
    </ul>
    <audio id="audioPlay">
    </audio>
</body>
</html>

As of now not every browser supports every sound file format, so to be cross browser conform you should provide the sound file(s) in more than one format.

Upvotes: 1

jzacharia
jzacharia

Reputation: 502

You need to host the file somewhere. The source can't be from your local drive. If you have complete control over your website, just host the file on your own server.

Edit: To go into greater detail, what you are currently trying to do is have your webserver locate a file in a directory that doesn't exist on the webserver. You are pointing it to a file that is located on your local drive (your computer). C:/ doesn't exist on your webserver. You need to place the file in a directory that is local to the webserver, not your own computer. You can use either a 3rd party hosting site or host it yourself.

If you want to host it yourself, access your webserver and create a folder specifically for sound files

(Example) File:/yourwebsite/res/sounds/bug.wav

Upvotes: 0

Curtis
Curtis

Reputation: 103338

One method (taken from the w3schools site) would be to include the Yahoo! media player:

<a href="song.mp3">Play Song</a>

<script type="text/javascript" src="http://mediaplayer.yahoo.com/js">
</script>

See Demo: http://www.w3schools.com/html/tryit.asp?filename=tryhtml_audio_yahoo

Upvotes: 0

Niet the Dark Absol
Niet the Dark Absol

Reputation: 324600

Try looking up HTML5 audio so you can see how you're supposed to do it.

Upvotes: 0

Related Questions