Solved

Play audio in HTML 5

Posted on 2013-01-25
7
387 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 500 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
DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

 
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

Optimizing Cloud Backup for Low Bandwidth

With cloud storage prices going down a growing number of SMBs start to use it for backup storage. Unfortunately, business data volume rarely fits the average Internet speed. This article provides an overview of main Internet speed challenges and reveals backup best practices.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Have you tried to learn about Unicode, UTF-8, and multibyte text encoding and all the articles are just too "academic" or too technical? This article aims to make the whole topic easy for just about anyone to understand.
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

770 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