Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

Play audio in HTML 5

Posted on 2013-01-25
7
Medium Priority
?
395 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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 does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
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

The top UI technologies you need to be aware of

An important part of the job as a front-end developer is to stay up to date and in contact with new tools, trends and workflows. That’s why you cannot miss this upcoming webinar to explore the latest trends in UI technologies!

Question has a verified solution.

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

Find out what you should include to make the best professional email signature for your organization.
Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
In this tutorial viewers will learn how to code links for mobile sites that, once clicked, send a call or text to a specified number. For a telephone link (once clicked, calls a number), begin with a normal "<a href=" link tag. For the href, specify…
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…

721 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