Customize Audio Player (html5)

Is there a way to modify the appearance of the standard audio player in html5. I think it's too wide, too high and I'd like to change the color, so that it matches the website I use it in. Can it be done by changing css-specifications?

The HTML5 audio/sound players are styled by the browser in which they are viewed. IOW, there's nothing you can do to change its appearance except to change browsers. Height and width of player is controlled by the attributes you set in the HTML code.
When you need something less generic looking, step up to a commercial/3rd party player.
Pickle Player
http://www.pickleplayer.com/
JW Player
http://www.longtailvideo.com/jw-player/
Flowplayer
http://flowplayer.org/
Nancy O.

Similar Messages

Audio Player Widget - Muse

I have searched everywhere for a way to have a simple audio player on a web page in Muse and the code below when pasted into "Insert HTML" gives us the most basic HTML5 audio player.
<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio tag.
</audio>
This gets a basic audio player on the page and is fine if one doesn't mind the default look of the player. (Above Player shown in Safari)
Basically any audio player that looks different from this one above is going to have to be coded in some way and that's where the difficulty starts.
The only place that I have found on the Internet that has really small, minimal and clean audio players is at this site:
http://www.podsnack.com
which is set up for heavy duty traffic use of the player as their plans support 25,000 plays per day, which is way more than I need, however they do have 2 or 3 really nice looking tiny audio players that are completely editable color-wise that have a base look like these:
There are more examples here:
http://www.podsnack.com/mp3-player-examples/
I love the clean look of the 2 players above, and all the colors are changeable:
The main drawback with the podsnack site is that even the most basic plan costs $8 per month with a minimum 1 Year up-front payment of $96.00.
But, they are hosting the audio files on their servers and providing the skin of the player.
So far this is the only solution I have found to get a really small, clean visually customizable audio player onto a Muse website.
If Adobe could come up with a way to create some Audio Player Widgets that include some very small clean ones, I would find that to be a great asset to Muse.
I think that it would probably be easier for Adobe to design a widget that can play the audio file from the user's hosting server rather than Adobe's servers otherwise Adobe is going to be storing a huge number of audio files belonging to Muse customers.
The audio file can be placed on the user's hosting server in the same way that files such as pdf's are placed there when the user want to provide a link to download the pdf.
I am requesting that Adobe create some clean, customizable Audio Player Widgets.
Now that there are Widgets to place YouTube and Vimeo videos plus Social Media icons on pages, Audio Player Widgets are the next logical step.
Cheers,
Chris.

Well, I kept on looking for reliable ways to place simple HTML5 audio players onto pages and I really didn't come up with any useful solutuions.
Lots of open source JavaScript players etc, which I highly respect and trully wish I had a load of skill with, but I just found them to be out of reach at this time.
So, I broke down and coughed up the $96/year fee ($8/month) for the podsnack.com player set up and have found them to be absolutely effiortless to use and completely editable with regards to the look.
I have an example of some tiny players on a page here: http://amsondesigns.com/misc-files/podsnack-demo
And the Podsnack example page is here: http://www.podsnack.com/mp3-player-examples
BTW, I don't work for Podsnack!
If Adobe comes up with some Widgets that effectively provide what Podsnack are doing, then for me that will be the answer.
Until then I'm going to use Podsnack.
Cheers,
Chris.

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.

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

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.

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.

Please help me install this audio player!

Hello anyone reading this,
I am very new to designing a website, and decided to venture out and add some audio to it. I am a piano instructor and am VERY determined to do this.
I recently purchased some files from this site:
http://www.flashcomponents.net/component/advanced-mp3-player-with-play list-totally-customizable-xml-driven.html
That is the same exact one I purchased.
I recently engaged in a little email session with the author / developer and he was sending me emails that had a lot of technical language of which I couldn't understand. I needed help, and he didn't seem to pay much attention to my problem, just kept repeating the same thing.
I eventually was able to research his terminology and I finally got around to being able to comprehend his 'steps' listed for me to get this thing up and running.
He basically said everything I needed was in a folder titled 'deploy' ... and that I just copy that folder into my Dreamweaver site project , along with my images, root folder, etc. Ok, easy enough. I did that.
His next step was to insert the .swf file into my web page in Dreamweaver. Ok, easy enough. Did that. BUT, there is a problem. A fairly large grey box shows up with an F inside it. This is in 'design' view. In 'Live view', I see nothing at all of the player, just a large grey box with no F inside it.
The peculiar thing is that there are 3 files inside this 'deploy' folder that when I double click them ... a beautiful audio mp3 player pops up and performs perfectly. It's the real thing. Just when I insert the .swf file into my site, nothing at all happens. And this was what the guy told me to do.
Since then he stopped corresponding with me. Not sure why. Here are the files I have in 'Deploy'.
playlist.xml
playerstyles.css
playersettings_v4.xml
Mp3player_v4.swf
index.php
index.html
BG.jpg
AC_RunActiveContent.js
The 2 index files open up a perfect audio player as shown on the site. So does the Mp3player_f4.swf.
I also have a folder called 'scripts' that has 2 scripts listed for the audio player.
swfobject_modified.js
expressInstall.swf
Please oh please, if any of this makes any sense and if what I typed is a symptom of something, please help me. I am desperate as all the research I've done is getting me nowhere!!!

Your testing confirms my suspicion that it’s a pathing problem
“Then I tested out the index.html and the index.php files that are located in 'deploy'
They didn't work. no image at all ... nothing. “
That is working correctly. If you path it to work from the Web page, of course it will not work from “index.html” in the deploy folder… it’s not supposed to. It’s supposed to work from the Web page one folder level up. Did you test it from YOUR Web page after changing the paths?
“I noticed that as I said the index.html and the index.php didn't work ... but the mp3player_v4.swf STILL worked perfectly fine. All 3 of those files are under 'deploy'”
This is also to be expected, because when testing the .swf directly (not on YOUR Web page), the paths in the xml file to the mp3s is correct. But remember, when you place that .swf on YOUR Web page, you are removing the .swf from “deploy” and placing it in the same folder as your Web page….. it’s not in deploy anymore.
“Also, a peculiar thing happened as well as I was playing around with things. “
Well for testing you could take everthing out of “deploy” and move it into the same folder as YOUR Web page and just change the path on your web page to the .swf (delete the “deploy/” part). Now every thing is in the root folder, there is no deploy folder, only a “sound” folder which holds the mp3s and the palyer would work just fine, because RELATIVE to the location of the .swf on the WEB PAGE, all the paths are correct.
But then you don’t really learn how to resolve pathing issues.

A few questions about audio player in iBooks Author

1. How can I set the player to a small icon in Landscape layout? It seems that I have to display the player in the Landscape layout and show a big icon (which can't be resized) in the sidebar of the Portrait layout. Is there a way to customize this?
2. I notice that the audio player in iBooks Author looks different from that in the actual iBook on iPad?
In iBooks Author it's silver, which looks pretty nice:
But in actual iBook on iPad it becomes black:
Is it possible to customize the look of the player?
3. Another problem about the player in the actual iBook on iPad: When I have multiple players on the same page, only one of them shows the progress bar and time; others just show a play button:
If I click the one which only has a play button, the whole player will disappear (and won't play the audio clip). I must click the area (which the player is supposed to be in) again, and the player will show up with the progress bar and time (and other players will only have a play button).
This is very annoying. Does anyone have the same problem?

assuming you have a MovieClip mc on stage with the registrationpoint in the center:
stage.addEventListener(MouseEvent.CLICK, zoomHandler);
var currentZoom:Number = 1;
var zoomFactor:Number = 1.1;
var maxZoom:Number = 2;
function zoomHandler(e:MouseEvent):void{
    var zoomCenter:Point = new Point(e.stageX, e.stageY);
    var mcCenter:Point = new Point(mc.x, mc.y);
    var _xCorrection:Number = mcCenter.x-zoomCenter.x;
    var _yCorrection:Number = mcCenter.y-zoomCenter.y;
currentZoom +=zoomFactor-1;
if(currentZoom<maxZoom){
    mc.scaleX +=zoomFactor-1;
    mc.scaleY +=zoomFactor-1;
    mc.x -=_xCorrection*zoomFactor*.5;
    mc.y -=_yCorrection*zoomFactor*.5;
else{
trace("maximal zoom level reached");

Using FMS v4.5.5 with a browser-based audio player running on iPad/iPhone

Hello,
I’m seeking some clarity/guidance on using FMS v4.5.5 (Streaming Edition) with a browser-based audio player running on iPad/iPhone (i.e. under iOS).
Background
I have a Microsoft Windows 2008 R2 Web Server running IIS v7.5 and supporting a website built using ASP.NET and C#. Parts of the website allow a visitor to play a selection of audio clips from our bespoke MP3 library. Due to UK music licencing constraints, we must stream the clip to the client browser – we must not download either part or all of the source MP3 file(s). We therefore had a custom audio player built for us some time ago using Flash/AS3. This has and continues to work very well, and uses RTMP to stream the clips from FMS to the client browser.
As our site has become more established the number of visitors has steadily grown. In the early days the number of visitors from the iOS platform was relatively small but, last month, it had risen to 40%! As Flash is not supported on the iOS platform, this growing group of visitors are unable to fully maximise the benefits offered by the website, which I am now trying to address.
What I’m Trying To Do…
From what I’ve researched and read, I believe that FMS v4.5.5 supports HLS and I need to use this (instead of RTMP) over HTTP between FMS and the iOS Safari client. I have been experimenting with an Open Source player (JPlayer) and a commercial player (JWplayer) and appear to have these playing a MP3 file as a “progressive download” (I think that’s the right term) as all I’m doing is specifying the file path (no HTTP prefix etc.), i.e. the audio is not really being streamed as I require. Unfortunately, I’ve not found / worked out how to configure my FMS to respond to a path request along the lines of:
http://www.myserver.com/live/audio1.mp3
Hopefully someone reading this who is much more expert on FMS, HLS, HDS, HTML5, etc. than me can point me in the right direction!
What I’m confused about…
1) Can all my MP3 assets stay as is and still be streamed to the iOS Safari client? To the best of my knowledge, the key properties of my MP3 files are CBR, 44,100Hz, 320Kbps.
2) If not, can they be converted on-the-fly by FMS or do I need to create additional audio assets to support HLS etc.?
3) If I have to manually create additional audio assets, how do I do that (I’ve seen references to tools from both Adobe and Apple but not actually found the kits)?
4) Some of the Adobe documentation I’ve read implies that FMS support for HLS etc. is only available when FMS is used in conjunction with the bundled Apache web server. As stated earlier, my entire site runs on IIS so does that mean to achieve what I want I’ll have to run two web servers on my physical server – IIS for the website itself and Apache for RTMP/HLS/etc.?
5) What changes do I need to make to my current FMS configuration to get HLS to work? I’m sure someone has been here already and can enlighten me with their experience and hopefully point me to some straight forward documentation to follow!
6) Lastly, and really part of (5), once I’ve got FMS configured correctly, what would be the typical path to a given MP3 audio file that I would give the iOS Safari browser to make this all work.
I appreciate this is rather a lengthy first post but hopefully the background puts my questions (and confusion!) in context. Bottom line is… I simply want to be able to stream audio clips only (no video) to iOS Safari browsers from FMS v4.5.5 running on a Win2K8R2 platform with IIS v7.5, and with no audio content being stored (even temporarily) on the iOS platform.
My thanks and appreciation in advance to anyone who can help me achieve this.
Steve Barker
Business IT Solutions

Hi Apurva,
Thank you for your reply. Unfortunately I am not much further forward, despite having read more Adobe documentation (FMS v4.5 Configuration and Administration Guide, FMS v4.5 Developer’s Guide) and trying different configuration options.
First to confirm a point you made when answering point 4 yesterday. Yes, in my current RTMP scenario I have several MP3 assets (let’s call them Audio1.mp3, Audio2.mp3, Audio3.mp3, etc.) that are made available to a bespoke Flash/AS3 player via the LIVE application. I understand that as I purchased the Streaming Edition of FMS v4.5, a Flash-based player is restricted to using the LIVE application. You go on to say that I “publish” these assets to the LIVE application. I set this up a while back but do not recall having to “publish” anything. All I recall doing was to ensure that all the assets (the .mp3 files) were in a single folder and that the folder was identified by the <Streams> tag in the following file (example shown):
Flash Media Server 4.5\applications\live\Application.xml
                <StreamManager>
                                <VirtualDirectory>
                                                <Streams>/;C:\MP3Library</Streams>
                                </VirtualDirectory>
                </StreamManager>
To the best of my knowledge, I didn’t have to do anything else to make the current solution work. Having read more of the documentation I am still none the wiser as to what I need to do (step-by-step) to “publish” my converted MP3 assets (see next paragraph) to the LIVEPKGR application. Please could you explain these steps to me by way of an example.
WRT your answer to point 1 yesterday, I wish to clarify the exact output I need to create when converting my MP3 assets. Am I expected to produce a Audio1.aac file, or a Audio1.mp4, file, or a Audio1.m4a file, etc.? Or am I meant to be using ffmpeg (either directly or indirectly) with a much more sophisticated command line that somehow generates stream-rated info/files as well? An example of how you would use ffmpeg to convert one of my MP3 assets would be very much appreciated.
Lastly, the coexistence of IIS and Apache (ref your answer to point 2 yesterday). That all made sense but given all the testing/changes I’ve been making I thought it wise to start afresh! So I completely removed FMS from my dev server and re-installed Flash Media Streaming Server v4.5.5 with the bundled Apache v2.2 server. When presented with the dialogue “Would you like for Apache to listen on port 80. If not FMS will be using port 80 instead.” I answered NO. When presented with the dialogue regarding FMS server ports, I entered 1935 NOT 1935,80 (should I have done that as the preamble makes reference to HTTP webserver proxy and HTTP Dynamic Streaming origin services?). I then modified the Application.xml file as described above.
To test the new set-up, I did the following. First, the test environment…
DEV Server
Windows Web Server 2008 R2 SP1
IIS v7.5
ASP.NET v4.0
Flash Media Streaming Server v4.5.5
Apache v2.2
IE v9.0
Adobe Flash Player 11 ActiveX v11.5.502.146
TEST Client
Apple iMac (Intel)
Mac OS X v10.6.8
Safari v5.1.7
Adobe Flash Player 11 Plug-in v11.5.502.146
On DEV Server… launched IE and loaded the home page of my website, which has two elements on it – one to load/run our bespoke Flash player, the other to run JPlayer (configured to use HTTP). I selected our bespoke Flash player and it played a MP3 audio file. I verified this in real-time via the FMS Admin Console on the server.
On TEST Client… entered http://192.168.20.250:8134 into Safari – it comes up with the FMS install completed / test your server page. In the middle of the video display area a black box appears saying “10000 OK” – I clicked OK. I then clicked HDS Single Bitrate – the video plays (Not Using Hardware Acceleration is briefly displayed). There is NO activity logged in the FMS Admin Console back on the DEV server under “live”, “livepkgr” or “vod”. I assume this is because I’ve gone straight to the Apache Server via the port reference – is that correct? Next I tried the HLS Single Bitrate – same results.
The HDS Single Bitrate logs the following in the Apache access_log file:
"GET /hds-vod/sample1_1500kbps.f4v.f4m HTTP/1.1" 304 - "-" "Apple Mac OS X v10.6.8 CoreMedia v1.0.0.10K549"
The HLS Single Bitrate logs this:
"GET /hds-vod/sample1_1500kbps.f4v.f4m HTTP/1.1" 304 - "-" "Apple Mac OS X v10.6.8 CoreMedia v1.0.0.10K549"
"GET /hls-vod/sample1_1500kbps.f4v.m3u8 HTTP/1.1" 304 - "-" "Apple Mac OS X v10.6.8 CoreMedia v1.0.0.10K549"
"GET /hls-vod/sample1_1500kbps.f4v.m3u8 HTTP/1.1" 200 816 "-" "Apple Mac OS X v10.6.8 CoreMedia v1.0.0.10K549"
"GET /hls-vod/sample1_1500kbps.f4vFrag1Num0.ts HTTP/1.1" 200 1143416 "-" "Apple Mac OS X v10.6.8 CoreMedia v1.0.0.10K549"
"GET /hls-vod/sample1_1500kbps.f4vFrag1Num1.ts HTTP/1.1" 200 873072 "-" "Apple Mac OS X v10.6.8 CoreMedia v1.0.0.10K549"
"GET /hls-vod/sample1_1500kbps.f4vFrag2Num2.ts HTTP/1.1" 200 1591984 "-" "Apple Mac OS X v10.6.8 CoreMedia v1.0.0.10K549"
etc…
At this point I’m stuck once again since I’m not clear how to construct the JPlayer HTTP reference. You have suggested:
http://192.168.20.250:8134/hls-live/livepkgr/_definst_/livestream/livestream.m3u8
That produces the following in the Apache error_log file:
[error] [client 192.168.20.4] File does not exist: D:/Program Files/Adobe/Flash Media Server 4.5/webroot/hls-live
If I change the JPlayer HTTP reference to:
http://192.168.20.250:8134/hls-vod/sample1_1500kbps.f4v.m3u8
the audio from the video plays.
Also, if I look in the applications\livepkgr folder structure there is only \events (with sub-folder _definst_ and sub-sub-folder liveevent) – there are no _definst_ , livestream , streams folders etc. So besides me not quite understanding the logic/flow here, I seem to be missing a few folders/files too! I’d be very grateful for any light you can shed on all this. Plus an example of what my HTTP string should ultimately look like; for example:
http://192.168.20.250:8134/hls-live/livepkgr/_definst_/livestream/Audio1.m3u8
Apologies for such a long reply but I’ve been at this for over 10 hours today! I feel I’m getting closer but clearly there are still some gaps and configuration errors.
Thanks again for your time, support, patience and understanding.
Kind Regards, Steve

Looking for a Fully Functional HTML 5 Audio Player that has a playlist capability

Does anyone know how to build, find or purchase a full functioning HTML 5 Audio Player that has a playlist. I have found the small single mp3 player but I am looking for a full functioning Audio Player that can load and play several tracks from an album etc. I see beautiful HTML 5 Video players everywhere but it seems no one has figured out how to make an awesome Audio Player that plays multiple songs. Help

You can try these :
http://amazingaudioplayer.com/how-to-insert-an-html5-audio-player-to-your-webpage-with-ifr ame/
http://www.musegrid.com/adobe-muse-widgets/audio-widget
http://www.muse-themes.com/blogs/news/8285249-embedding-a-mobile-tablet-friendly-audio-pla yer
Thanks,
Sanjit

Help with mediaelement audio player, iPad resizing, and lytebox.

I'm a noob but trying to build my own site in iWeb and using Coda to edit code.
I am a music producer and my website has a page on it that showcases some audio.
I have 3 issues that after about 30 hours of research and fiddling...I can't for the life of me figure out.
I am a music producer and my website has a page on it that showcases some audio.
1. Lytebox - I am using a lytebox to open a page I designed (HTML page in iWeb) that has 2 links on it so the viewer can choose where they want to go. When said lytebox opens and one clicks one of the two links, the linked page will open within the lytebox. I dont want this. I want the lytebox to close and the linked page to navigate normally in a regular web page.
     After much research I have found a code that lytebox posted to be able to do such a thing. They posted this code:
          <a href="javascript:void(0)"
                  onclick="parent.$lb.end()">End Lytebox from my page inside Lytebox</a>
     I have pasted that code everywhere I can think of and it doesn't work. I'm not even sure where to post it (on the first page where the lytebox links from? on      the page that opens in lytebox? on the page lytebox is linking to?)
     Here is the page i'm referring to: http://dallaskruse.com/dallaskruse.com/dallaskruse.html
     The lytebox link is in the Gramophone at the bottom left of the page.
2. MediaElement Audio Player - I am trying to build a page where I can showcase about 15-20 audio clips (about 20-30) seconds each. It is very important to me to be able to hear/view this page correctly on multiple browsers along with tablets and mobile phones. Someone recommended medialement.js.
After HOURS of trying to figure this out, I finaly found a way to add multiple players but not have them load the audio so as to not slow down the web page...and it just was simply not loading on an iPad.
Here's my issue:
     I couldn't figure out how to design (in code) how to add text (song name, artist info, etc) that was to my liking in the HTML so I added the <audio> player via <HTML> and just added text around it in iWeb manually. Problem: iPad is somehow resizing the layout and by the time you get to the bottom of the page, the <audio> players have moved and are now covering up the text. Its all a big mess.
     Question: can mediaelement.js use a jukebox style playback?
     Here's a link to the page in question: http://dallaskruse.com/dallaskruse.com/arrangements.html
3. MediaElement Not Playing Back on iPad - I've ran some tests and when I just have 1 <audio> player on the page, it'll play fine on the iPad. But when there's more than 1 player then none of the <audio> players want to work. I'm not sure what's going on but even after about 20+ hours of sitting at my laptop, I'm thinking of searching around for a jukebox that has HTML5 and Flash fallback that looks NICE and easy to modify for beginners.
If ANYONE has ANY pointers or can help in ANY way ... I'd be forever greatful. Sorry for the long post.

in iWeb, on the page in question, i've only got 2 HTML snippets (windows). One for the "Vocals" and one for the "Orchestrations".
In the HTML snippet, I've coded in 12 players for the "Vocals" snippet and 10 in the other snippet for the "Orchestrations" players.
So, I guess I only have 2 snippets.
heres the "Vocals" code
<!DOCTYPE html>
<html>
<head>
          <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
          <script src="http://dallaskruse.com/mediaelement/build/jquery.js"></script>
          <script src="http://dallaskruse.com/mediaelement/build/mediaelement-and-player.min.js"></script>
          <link rel="stylesheet" href="http://dallaskruse.com/mediaelement/build/mediaelementplayer.min.css" />
</head>
<body>
<div class="player"><p class="song"> Wade in the Water</p><p class="artist">performed by dallas kruse</p>
<audio id="player1" src="http://dallaskruse.com/mediaelement/media/Vocals/wadevoxMASTERCLIP.mp3" type="audio/mp3" controls="controls" preload="none">
</audio>
<script>
$('audio').mediaelementplayer();
</script>
<br/>
<br/>
<audio id="player2" src="http://dallaskruse.com/mediaelement/media/Vocals/45sMasterClip.mp3" type="audio/mp3" controls="controls" preload="none">
</audio>
<script>
$('audio').mediaelementplayer();
</script>
<br/>
<br/>
<audio id="player3" src="http://dallaskruse.com/mediaelement/media/Vocals/4amBlues.mp3" type="audio/mp3" controls="controls" preload="none">
</audio>
<script>
$('audio').mediaelementplayer();
</script>
<br/>
<br/>
<audio id="player4" src="http://dallaskruse.com/mediaelement/media/Vocals/sunshinevocalsMASTERCLIP.mp3" type="audio/mp3" controls="controls" preload="none">
</audio>
<script>
$('audio').mediaelementplayer();
</script>
<br/>
<br/>
<audio id="player5" src="http://dallaskruse.com/mediaelement/media/Vocals/IllSayNothingVocals.mp3" type="audio/mp3" controls="controls" preload="none">
</audio>
<script>
$('audio').mediaelementplayer();
</script>
<br/>
<br/>
<audio id="player6" src="http://dallaskruse.com/mediaelement/media/Vocals/ImOnYourSideVocalsMasterClip.mp 3" type="audio/mp3" controls="controls" preload="none">
</audio>
<script>
$('audio').mediaelementplayer();
</script>
<br/>
<br/>
<audio id="player7" src="http://dallaskruse.com/mediaelement/media/Vocals/BenjaminOrchVoxMasterClips.mp3" type="audio/mp3" controls="controls" preload="none">
</audio>
<script>
$('audio').mediaelementplayer();
</script>
<br/>
<br/>
<audio id="player8" src="http://dallaskruse.com/mediaelement/media/Vocals/MoonRiverVocalArr_2.mp3" type="audio/mp3" controls="controls" preload="none">
</audio>
<script>
$('audio').mediaelementplayer();
</script>
<br/>
<br/>
<audio id="player9" src="http://dallaskruse.com/mediaelement/media/Vocals/justsouthvocalMASTERCLIP1.mp3" type="audio/mp3" controls="controls" preload="none">
</audio>
<script>
$('audio').mediaelementplayer();
</script>
<br/>
<br/>
<audio id="player10" src="http://dallaskruse.com/mediaelement/media/Vocals/NewJerusalemVocals.mp3" type="audio/mp3" controls="controls" preload="none">
</audio>
<script>
$('audio').mediaelementplayer();
</script>
<br/>
<br/>
<audio id="player11" src="http://dallaskruse.com/mediaelement/media/Vocals/RevolvingVocalsMasterClip.mp3" type="audio/mp3" controls="controls" preload="none">
</audio>
<script>
$('audio').mediaelementplayer();
</script>
<br/>
<br/>
<audio id="player12" src="http://dallaskruse.com/mediaelement/media/Vocals/StopThis_Vocal Arr.mp3" type="audio/mp3" controls="controls" preload="none">
</audio>
<script>
$('audio').mediaelementplayer();
</script>
</body>
</html>

Simple lightweight Qt audio player: TepSonic

Hi,
I'd like to introduce my opensource project TepSonic. It's a simple lightweight audio player written in C++ using Qt. It's a multiplatform application (but still having some issues on Windows, MacOS X port in progress).
TepSonic supports collections, data are stored in database (using MySQL or SQLite (default) backend) and is easily extensible via plugins. At the moment it has only Last.fm scrobbling plugin.
Some images:
I'm looking for both, user feedback and some help - advices from more experienced users are welcomed, so are patches.
Official homepage: http://www.tepsonic.org
Qt-apps homepage: http://qt-apps.org/content/show.php/Tep … ent=123991
Bugzilla: http://bugs.tepsonic.org
PKGBUILD: https://aur.archlinux.org/packages.php?ID=36950 (git version, stable releases sucks )
Last edited by ProgDan (2010-07-31 12:16:17)

this looks really nice. i'd like to see where you go with it.
some thoughts:
1. this may already be planned, but how about customizable keyboard shortcuts? global shortcuts would be nice, too (i see this on the buglist.)
2. here's an idea for the search function:
-activate the search field with a keyboard shortcut (e.g., 'j' for 'jump')
-search for words, not strings (e.g., searching for 'porcupine voyage' brings up 'porcupine tree - voyage 34', even if 'porcupine voyage' appears nowhere in the name)
-after typing in some keyword, play the selected song by pressing 'enter'
-after hitting 'enter', clear the search field, show the whole playlist, and highlight the song
3. would it be possible to implement something like foobar2000's shuffle algorithm? in particular, i like this: if i jump to a specific song s, that song s becomes the new reference point. so, e.g., once s ends, skipping to the previous song skips to s, not to what would have been the previous song had s not been selected.

How do you initialize audio player on iPhone 5s iOS8?

I am trying to use Scan & Translate and Translate Photo but the error message that says "Unable to initialize audio player" comes up and cannot use those apps.
How do you initialize audio player on iPhone 5s iOS 8?

Ddeveloper has not updated their app since July.
THey need to update to be ios 8 compatible.
the popup you are getting is the app failing to work, not a direction for you to follow.

Customize Audio Player (html5)

Similar Messages

Maybe you are looking for