CODEWITHSUNDEEP
htmlaudio
Jeremy
Jeremy

Reputation: 27

I'm trying to add audio to my html.

I'm trying to add audio to a webpage. I don't know why it isn't working.`I am doing a sound samples webpage. I can see the audio bar on the screen but the audio doesn't play. I't says that it's 0:00 long so maybe its not finding the audio. The path to the audio is C:\Users\matth\Desktop\Website\samples. I've tried it on chrome and firefox.

<div class="soundsamples">

  <audio controls>
   <source src="sound sample 1.mp3" type="audio/mpeg">
  </audio>

  <audio controls>
   <source src="sound sample 2.mp3" type="audio/mpeg">
  </audio>

  <audio controls>
   <source src="sound sample 3.mp3" type="audio/mpeg">
  </audio>

  <audio controls>
   <source src="sound sample 4.mp3" type="audio/mpeg">
  </audio>

  <audio controls>
   <source src="sound sample 5.mp3" type="audio/mpeg">
  </audio>

  <audio controls>
   <source src="sound sample 6.mp3" type="audio/mpeg">
  </audio>

  <audio controls>
   <source src="sound sample 7.mp3" type="audio/mpeg">
  </audio>

  <audio controls>
   <source src="sound sample 8.mp3" type="audio/mpeg">
  </audio>
 </div>

Upvotes: 2

Views: 329

Answers (1)

Xantium
Xantium

Reputation: 11603

The problem with this script is that the html page cannot find the audio and therefore play it.

From your example given above, you say your audio files are located at C:\Users\matth\Desktop\Website\samples.

In order for your audio to play the html page would have to be located in the same folder as the audio itself (IE C:\Users\matth\Desktop\Website\samples) which it is not.

From your comment you say that your html file is located at C:\Users\matth\Desktop\Website so you must either change the location of the audio files or give the correct file path.

Changing the file path is easy. To access a sub-folder you would just use /SubfolderName/ and to go up a dictionary you would use ../.

So knowing that the location of the audio is C:\Users\matth\Desktop\Website\samples we would just need to go in the sub-folder samples. This can be done easily by just adding it to you existing file path. In your first example the working path would be:

.

You can see this page for more details on changing file paths.

W3schools also do a marvelous tutorial on the subject as well.

Hope I was helpful.

Upvotes: 1

Related Questions