Improve company productivity with a Business Account.Sign Up

x
?
Solved

Play audio in HTML 5

Posted on 2013-01-25
7
Medium Priority
?
402 Views
Last Modified: 2013-01-25
I'm trying to develop a way to play audio in HTML 5.

I was under the impression it did it as a part of HTML 5.

The attached code does not work; I think it will be clear what I am attempting.

What I need is the ability to click a button on a page & when the button is clicked, play the audio file. I do NOT want controls; no visible player on the page.

NO Flash; I need this to work in the iPad / iPhone environment.
0
Comment
Question by:Richard Korts
  • 5
  • 2
7 Comments
 
LVL 7

Expert Comment

by:Element1910
ID: 38820875
Can you copy/paste your HTML5 markup you are currently using?

In the meantime, the iPad/iPhone can typically only play MP3 and AAC files...just make sure that you include it in the <audio> tags like so:
<audio>
   <source src="audio.mp3" type='audio/mpeg; codecs="mp3"'>
</audio>

Open in new window

0
 
LVL 7

Accepted Solution

by:
Element1910 earned 2000 total points
ID: 38820883
You could try this if you want to control the HTML5 audio with a button click via javascript:

<audio id="player" src="audio.mp3"></audio>
<div>
	<button onclick="document.getElementById('player').play()">Play</button>
</div> 

Open in new window

0
 

Author Closing Comment

by:Richard Korts
ID: 38820952
Works perfectly (in IE). Will it work in FireFox or do I need an ogg file? Or is that video only?
0
What Kind of Coding Program is Right for You?

There are many ways to learn to code these days. From coding bootcamps like Flatiron School to online courses to totally free beginner resources. The best way to learn to code depends on many factors, but the most important one is you. See what course is best for you.

 
LVL 7

Expert Comment

by:Element1910
ID: 38821004
Glad it worked out for you :)

Yes, it will work in FireFox as well, but you'll need either an .ogg or .wav...which in HTML5 is easy to implement, just add an additional fallback audio source and to change a few things around:

<audio id="player">
    <source src="audio.mp3" type="audio/mpeg">
    <source src="audio.ogg" type="audio/ogg">
</audio>
<div>
	<button onclick="document.getElementById('player').play()">Play</button>
</div>

Open in new window

0
 

Author Comment

by:Richard Korts
ID: 38821080
Will it also work in Safari & Chrome?
0
 
LVL 7

Expert Comment

by:Element1910
ID: 38821118
Absolutely :)...just make sure you use the correct default audio file for the browser you are wanting to use...so if another browser supports a different audio file, just add another line to the audio tags, like I've done in the last source code post I made :)
0
 
LVL 7

Expert Comment

by:Element1910
ID: 38821122
Here's a quick list for you:

Desktop Browser  Version       Codec Support
Internet Explorer       9.0+       MP3, AAC
Chrome                       6.0+       Ogg Vorbis, MP3, WAV†
Firefox                       3.6+       Ogg Vorbis, WAV
Safari                       5.0+       MP3, AAC, WAV
Opera                       10.0+       Ogg Vorbis, WAV

Mobile Browser       Version       Codec Support
Opera Mobile       11.0+       Device-dependent
Android                       2.3+       Device-dependent
Mobile Safari*       iOS 3.0+       MP3, AAC
Blackberry               6.0+       MP3, AAC

*(iPhone, iPad, iPod Touch)

You can also look at this URL for more browser specific codec support:
http://html5doctor.com/html5-audio-the-state-of-play/
0

Featured Post

Get 10% Off Your First Squarespace Website

Ready to showcase your work, publish content or promote your business online? With Squarespace’s award-winning templates and 24/7 customer service, getting started is simple. Head to Squarespace.com and use offer code ‘EXPERTS’ to get 10% off your first purchase.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
Originally, this post was published on Monitis Blog, you can check it here . In business circles, we sometimes hear that today is the “age of the customer.” And so it is. Thanks to the enormous advances over the past few years in consumer techno…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.

579 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question