How to access audio files for playback in HTML?

Question

So I'm trying to play in an HTML page an audio file that I downloaded to my IDE. Right now my code looks like this:

<audio src="admiral.wav" preload="none" controls></audio>

This causes an audio player control bar to show up on my HTML page, but when I try to click on it it doesn't do anything. Is the issue that I need to do some more back-end coding to allow the audio file to play when I click the play button? Or is the issue that it doesn't know what "admiral.wav" is? Do I need to be more specific about the directory of the audio file?

Thank you!

Answer 1

This question looks to cover material beyond CS50's scope. You may have more luck posting your question on StackOverflow (or do some Googling yourself).

However..

For starters I recommend being as explicit about the directory as you can, especially if it doesn't load initially. That doesn't seem to be the issue though, while HTML5 contains built-in functionality for audio and video playback, it appears you'll still need to use JavaScript to handle events such as play/pause.

See any of the provided links for more detailed information.

• https://developer.mozilla.org/en-US/docs/Web/HTML/Element/audio
• https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Using_HTML5_audio_and_video#Controlling_media_playback
• For an alternative way of implementing <audio> in JS only: https://stackoverflow.com/a/18628124/6091017

If this answers your question, please click the check mark to accept, and help future readers finding the information they're after ;)

Answer 2

If you're gonna use just "admiral.wav", the file must be inside the root directory of your server (which would be public for pset7 if you've used apache50 start public etc).

And you also need to alter the permissions so the file can be read by the general public, so:

chmod a+r admiral.wav

If you decide to create, let's say, a sounds folder inside your root directory and put the .wav there, you'd change the path to:

<audio src="/sounds/admiral.wav" preload="none" controls></audio>

You'd also need to give execute permissions to sounds/ like:

chmod 711 sounds

If this solves your problem, please click the check mark to accept the answer