Adding an HTML5 audio player to a web page

I have a need to add audio player to a few band sites where there is a list of songs, or playlist, and someone can pick a song (or more) and the player will play it. Since the HTML5 audio tag will work only on one file, the only way I have found to do this is to make a separate page for each sound file and have it use it's own instance of the audio tag. I have seen many sites that have embedded audio players, but have no idea how they did it. I do see several 3rd party players on the net that can be used. Do any of you have any recommendations?
I am not looking to have music start automatically or on page load.

Look at Pickle Player. A commercial player that works in all web devices with MP3 audio or MP4 video and supports playlists.
http://www.pickleplayer.com/
Nancy O.

Similar Messages

Where is the HTML5 Audio player in DWCS6 Cloud version?

I just joined the subscription version of the Cloud and re-installed DWCS6 from there and don't see the new updates I've read about. Like the HTML5 Audio player I read about. Where the heck is it? Thanks! So far this I'm not sold on this Cloud thing and the terrible support I received by phone with Adobe.

Well... it was a bit of a pain to be honest. I had spoken to 3 different support agents who all had different information on what I needed to do to start using the Cloud. So I became very confused on who was giving the right info. When the account became active I went to update DW but it said I was up to date. It was my 19 year old son who suggested I uninstall my previous version of DW and then download it and re-install from the Cloud. I saved all my site logins first and noted which extentions I had. Once I did that I was able to update to the latest version of DW which has the new HTLM5 Video and Audio plugins.
I spoke to 6 different people yesterday while I was on the phone for nearly 2 hours and not one of them gave the right info. And I'll try and make this sound right, but 5 of those people were from a foreign country. While they were polite for the most part, they were very hard to understand and quite often would put me on hold for 5 minutes while they asked someone else for answers. I found myself not trusting anything they said because each one had different answers. I finally complained to a supervisor and stated that for the amount of money I've invested in their products over the last 13 years, it's crazy to have such unprofessional support.
Sorry if I've ranted here but I feel it's part of the experience that I had that may help someone else as you mentioned. Technically, trust your own intuitions or have someone with common sense around.
In closing, I did have to uninstall the programs I had previous to the Cloud and then reinstalled them to get the Cloud versions. AND I had to reinstall all of my DW and FW extentions. Thankfully all of my site logins for DW were still there.
Now that I'm up and running it seems to be working fine. But, not with much help from Adobe phone support. They get a D minus.
Thanks for listening and good luck all.

HTML5 audio player has no volume control

I'm using FireFox 20.0.1 & get no volume control on html5 audio player?
Is this broken in this version of FireFox?
Is it due to the plugins/addons conflicting?
Grateful for help & look forward to reply to get this fixed-thanks

Volume Control in Firefox 11+
This is an problem that has cropped up recently. Some of you may have noticed that the volume controls have disappeared from the audio player in Firefox 11+. True, you can mute it, and the volume controls are still controllable via the keyboard’s up and down keys, but the volume slider itself was removed due to two bugs. I assume this will return in the future, but for now, in case you were wondering what happened to them, it’s not your fault. (You can, of course, use the Media API to build your own set of custom controls.)

How can i add an HTML5 audio player to iWeb?

I'm trying to add an HTML5 audio player to my iWeb website.
I tried using the java script codes from players like speakker, jquery or JMS. Even though I downloaded everything from their websites, when I sent the code to the HTML snipet of iWeb, nothing happened.
Do you know how I can do this?
Thanks in advance,
Brazilian_girl

Thank you so much for all your info, that really helps.
I read the instructions for the speakker player, but they seemed so confusing to me in terms of how to do everything, setp by step in regards to iWeb.
So, let me make sure I got it:
1) I go to my FTP site/hosting create a new folder
2) add the music and the graphic content from the player (images form the buttons, etc...)
3) get a link from the FTP hosting site with all this stuff
4) Write the link in the code
5) paste the code (with the link in it) into the HTML snipet widget of iWeb.
Is this correct?
Thank you again, I really appreciate it!

Center an html5 audio player on a div

I have a symbol named AUDIOHOLDER
I load with:
var audio1 = sym.$("AUDIOHOLDER1");
audio1.html('<audio controls> <source src="lesson1/assets/audio/audio1.mp3" type="audio/mpeg"> Your browser does not support the audio element. </audio>')
I cant get the standard html5 audio player to center horizontally and vertically in the audio holder
Any ideas?

check out edgehero.com and use the center class.

I'm using iweb 3.4 and trying to load audio files to my web page. everything looks good in iweb but after publishing instead of having a control bar i have a "?". does anyone know what to do?

I'm using iweb 3.4 and trying to load audio files to my web page. Everything looks good in iweb but after publishing instead of having a control bar i have a "?". Does anyone know what to do?

Where are you hosting the site, how are you uploading the files and what's the URL of your site so we can examine it first hand?
Adding audio files by dragging onto the web page forces the viewer to have Quicktime installed on their computer in order to be able to listen to them. Look at the audio player options on this page of Roddy's iWeb for Musicians site: Audio Players for your Music Website.
OT

Help adding multiple HTML5 audio files to a single web page

Hello!
I'm designing a site in Adobe muse for a composer. I've been able to get a single audio clip to play in all browsers, however, when I try to add a second clip to the same page I run into a problem. The second clip won't play in Chrome unless I click on the first clip.
I would really appreciate any suggestions.
Thanks!

Hi MacUser 123, I'm just a amateur-hacker but I do have some experience with audio and video players and HTML 5.
I'm not 100% sure, but I think allowing the browser to supply an audio player has its limitations. I would guess that it would not allow you to have multiple players on one page, I'm not surprised by this. Also one of the biggest problems with audio and video players is that each browser type is different, and requires different file types. You have the right idea in your source code by using mpegs, oggs and MP3s.
In my experience I have found with audio, that it's best to have a "player" embedded in the webpage. I have had success over the years with players sometimes known as jukeboxes. There are quite of few players available out there from companies like Allweb, Pickle Player, etc., there's a whole bunch of them. I think you might want to do a search and come up with something that you think will work for you. It can get very complicated; you're going to have to deal with CSS, cascading style sheets, and some code situations.
I'm not sure if there are any quick fast fixes. I like "Pickle Player," but it's shaky, as a lot of this software is. I wish I could be more positive, but I have found it's just a long journey full of hit and miss, trial and error.
If you think audio players are problematic, wait to you get to video players - I've spent months trying to get those things working.
The experts are either way to sophisticated in their knowledge-base for me, or they are so inexperienced that they are no help at all.
Good luck, you're going to need it, if I can be of any further help let me know.
Maybe someone out there has some better ideas for you, but that's about it for me, that's the limitation of my experience and knowledge.
Joe R
Message was edited by: Joe Renzetti

Mp3 Files in HTML5 Audio player are working fine in Windows browsers but not playing song in Linux browsers. Please help

I have build an Audio player with HTML5 and jquery. Its working fine in firefox browser in windows OS.
But when i run that code on Linux OS browser. It doesn't play the song. Is this a bug or there is problem in my code ? Please help

On Linux you need proper GStreamer support to play mp3 files with the HTML5 media player.
*media.gstreamer.enabled = true
*Bug 794282 - Enable GStreamer in official builds

MP3 player on a web page?

I'm looking for a way to offer an MP3 to be played from a web
page, with a
player of some kind. In other words, I don't want to just
link to the MP3
and have it play in the user's default player, but have a
player on the page
with controls for playing the audio file. I don't need a
"jukebox", but just
a simple player for 1 file.
Any suggestions? (I know that Google is my friend, and we
have been spending
time together on this question, but it's not as good a friend
as live people
with experience. :-))
Patty Ayers | www.WebDevBiz.com
Free Articles on the Business of Web Development
Web Design Contract, Estimate Request Form, Estimate
Worksheet

Dooza wrote:
> (_seb_) wrote:
>> P@tty Ayers ~ACE wrote:
>>>
>>> "P@tty Ayers ~ACE"
<[email protected]> wrote in
>>> message
news:g20r22$49e$[email protected]..
>>>> I'm looking for a way to offer an MP3 to be
played from a web page...
>>>
>>> After checking out the suggestions here and a
few other
>>> possibilities, I followed this tutorial and
found it pretty simple to
>>> do what I needed (and for free):
>>>
>>>
http://www.macloo.com/examples/audio_player/
>>>
>>> You can see the little audio player in the top
blog post here:
>>>
http://mojomom.blogspot.com/
>>>
>>
>> just wondering: why not embed a quicktime player? it
will play mp3s.
>
> if you have quicktime installed...
>
> Steve
Yes, I looked into it and I'm just realizing many users don't
have quicktime. I thought almost
eveybody had it...
seb (@webtrans1.com)
high-end web design:
http://webtrans1.com
Sign-up for a free beta test of SiteLander, an ingenious
website-builder:
http://webtrans1.com/sitelander/
music:
http://myspace.com/popmodelberlin

Including video player in a web page

Hi,
We are trying to include a vedio player in our web site which should be compatible with MAC & Windows OS (Safari & IE browsers). We tried Real player , VLC player & Quick time but they are not running without codec.
If it is running for mac, it will not run in Windows & vis a vsa.
Can anyone suggest a player we can embed into our website which will be compatible with both OS.
Thanks

Flash Video format

Bidirectional communication between Shockwave Player and embedding web page

Can the 3D content in a Shockwave Player object be
manipulated by JavaScript from its embedding web page somehow ?
That is can the Shockwave Lingo/JavaScript capabilities be
leveraged from OUTSIDE the Shockwave movie ? And can the Shockwave
movie call arbitrary JavaScript functions which are defined in its
embedding web page ?

Check out
http://dasdeck.de/staff/valentin/lingo/dir_js/

I am trying to listen to an audio file on a web page using Windows Media but it always uses Quicktime. It doesn't do this in Internet explorer and I believe I have made the necessary changes in the Application settings.

I believe that I have made the necessary changes in Tools, Applications settings associating types of files to programs.

Start Firefox in [[Safe Mode]] to check if one of the add-ons is causing the problem.
* Don't make any changes on the Safe mode start window.
See:
* [[Troubleshooting extensions and themes]]
It is hard to tell which plugin is needed to play that webcast. You appear to have Flash and WMP and Silverlight. Other popular but less used plugins are RealPlayer and QuickTime.
See:
* [[Popular plugins]]
* http://kb.mozillazine.org/Testing_plugins
You can check the page source to see which MIME type is specified for that content or post a link if that web page can be accessed publicly without authorization.

Downloaded Firefox 4 to a new Laptop never used 4 before am having problems adding my custon buttons to frequently used web pages

I downloaded Firefox onto a laptop that did not have Firefox already installed. Downloading went well, but I do not know how to use 4, I had the older version on my desktop and I can not figure out how to add the applications I want to use on my bar. I had customized web pages and do not know how to re-make the app on 4. before you went into customize and you could make your own app with a picture and it brought me to my frequently used web page. HELP

Type '''about:config''' in the URL bar and hit Enter.
''If you see the warning, you can confirm that you want to access that page.''
Filter = '''browser.tabs.insertRelatedAfterCurrent'''
Double-click that preference to change the value to '''''false'''''

How can I disable html5 videos from displaying on web pages?

I use yahoo.com as my "news" page. In the last month or so there are more and more small format videos next to the new article. Used to be just a still pic, but now more "invasive". If I had my way I'd still click on "text only" like the old modem days. I want to READ an article, and I find the video images on their main page, before clicking on a story, to be distracting. Also, I'm on a limited data usage plan so don't appreciate them shoving data down my throat.
Using Firefox 32.0 and Windows 8.1
Yesterday I installed the "No Script" extension thinking I could block Just these videos, but doesn't seem to work that way. It blocks most everything including interactions like clicking on a button.
If I examine the "object" (video) it appears to be an "html5" item. This seems to be something new from what I can google.
There are a few help screens for html5, but these are "how do I play them" instead of "how can I block them".

Try to set the media.autoplay.enabled pref to false on the <b>about:config</b> page.
You can open the <b>about:config</b> page via the location/address bar.
You can accept the warning and click "I'll be careful" to continue.
*http://kb.mozillazine.org/about:config
You can also see if this extension works (Flash Block is currently broken).
*FlashStopper: https://addons.mozilla.org/en-US/firefox/addon/flashstopper/

Inserting html5 Captivate files into existing web page.

I have an existing html file that I want to import a Captivate html 5 file into.
In the past I would import the SWF file. Since SWF is not widely supported I am trying to use the html5 option
as a work around.
What file do I insert instead of the SWF?
Kind Regards,
-Robert B

This is not a Dreamweaver question as much as it is a Captivate question. See the Captivate forum below:
Adobe Captivate

Adding an HTML5 audio player to a web page

Similar Messages

Maybe you are looking for