Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

HTML

Jason Mercer
Jason Mercer
17,496 Points
Posted by Jason Mercer
Jason Mercer
17,496 Points

Audio in html

I've wanted to put audio files into a website for awhile but Treehouse doesn't seem to have any classes on that, so I learned how from w3schools.com. Here's what it said: (and I just copied and pasted it):

(embed height="50" width="100" src="filename.mp3")

(imagine the above code with html tags around it instead of parentheses. For some reason, anything in html tags doesn't show up in the forum.)

It works except for one thing; the file starts playing as soon as the page opens. Does anybody know what to put in the code so that the audio DOESN'T play until the user hits the start button?

James Barnett
James Barnett
39,199 Points
James Barnett
James Barnett
39,199 Points

> For some reason, anything in html tags doesn't show up in the forum.

The forum uses markdown to correctly format code, check out this thread on how to type code in the forum for some examples.

3 Answers

Dan Martin
Dan Martin
33,150 Points
Dan Martin
Dan Martin
33,150 Points

Jason, I never pick anything from w3schools.... not saying they have steered you wrong, but in the past I have recieved a lot of bad advice from that site. Below is an html5 method I used on a site a while back. Works well in most modern browsers and mobile devices.

Read more at mozilla about the tag https://developer.mozilla.org/en-US/docs/Web/HTML/Element/audio

audio src="/file.mp3" controls="" preload="none" style="width:380px;"

I see what you mean about the tags

James Barnett
James Barnett
39,199 Points
James Barnett
James Barnett
39,199 Points

HTML5 audio is pretty straight forward:

<audio id="audio_with_controls" controls autobuffer>
  <source src="http://playground.html5rocks.com/samples/html5_misc/rushus-modal_blues.mp3" type="audio/mpeg" />
  <source src="http://playground.html5rocks.com/samples/html5_misc/rushus-modal_blues.ogg" type="audio/ogg" />
  Audio tag not supported
</audio>

Working Demo on codepen

Dan Martin
Dan Martin
33,150 Points

James, Apparently it helps if I read "cheetsheet" instead of summarizing and only using the triple dots.Now I know, and knowing is half the battle.