[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

Need Streaming Audio Player (small height 45px) As website widget (NO FLASH)

Posted on 2012-08-31
14
Medium Priority
?
1,109 Views
Last Modified: 2012-12-20
I've fiddled with three different HTML5 <audio> tags on my webpage design and can't get any of the code to display a player and if it does, the play button doesn't work.  I need an iPhone / Safari friendly method for playing streaming music files from my website and have yet to find a solution that is not flash based.

The MP3 player from Reverbnation is too tall and doesn't load on a mobile browser even though it is HTML5 and not flash.

I need some proven solutions that meet my needs (45px height max) and able to play .mp3 and .ogg files.
0
Comment
Question by:day6
13 Comments
 
LVL 83

Expert Comment

by:leakim971
ID: 38356569
0
 
LVL 70

Expert Comment

by:Merete
ID: 38356581
He said NO FLASH!! lol
I can't prove these but hopefully meets some of your questions.
 If not wait till Monday.
Cheers Merete

A Simple Way To Play MP3 Audio Files
Extract
The iPhone media player is very easy to use, but it only works in landscape mode and it seems designed more for video than audio.  
If you wish to play an onboard MP3 or an MP3 file as it’s downloading (not really streaming, but progressive download) you have another option!  
Use the audio player embedded with Safari running in a UIWebView.
 
Here’s how to do it without having to create a special window for it.  Instantiate an UIWebView object using a 1×1 pixel sized frame (here self.playerView is an instance variable on my controller and is NOT added as a subview)
Source
And this one
WWW FAQs: How do I play MP3s in my web page on the iPhone?

How to
HTML5 Audio player works on safari/Chrome, but not iPhone
http://stackoverflow.com/questions/10688930/html5-audio-player-works-on-safari-chrome-but-not-iphone
0
 
LVL 83

Expert Comment

by:leakim971
ID: 38356586
JW Player use Flash OR HTML5
0
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 11

Expert Comment

by:mcnute
ID: 38357674
HTML 5 is capable of it.
<audio controls="controls">
  <source src="horse.ogg" type="audio/ogg" />
  <source src="horse.mp3" type="audio/mpeg" />
  Your browser does not support the audio element.
</audio> 

Open in new window

0
 
LVL 1

Author Comment

by:day6
ID: 38371666
the jw player seems to be video focused, and that's not my goal. also, the HTML5 player code posted by MCNUTE is the same code I've used and it doesn't work on mobile browsers.
0
 
LVL 83

Expert Comment

by:leakim971
ID: 38372073
check this one, you can create your own interface : http://www.jplayer.org/
0
 
LVL 1

Author Comment

by:day6
ID: 38706803
None of these replies solved my issue... at all.
0
 
LVL 1

Author Comment

by:day6
ID: 38708117
I've requested that this question be closed as follows:

Accepted answer: 0 points for day6's comment #a38706803

for the following reason:

None of the answers offered provided a solution.
0
 
LVL 83

Expert Comment

by:leakim971
ID: 38707808
where I was wrong with jplayer?
0
 
LVL 1

Author Comment

by:day6
ID: 38707910
@leakim971 The Jplayer did NOT provide the ability I requested. It is offered in HTML5 but not scalable to the size I requested and does not play on iPhone platform.  I would NOT have said NO SUGGESTED SOLUTIONS work if I didn't mean it.
0
 
LVL 83

Expert Comment

by:leakim971
ID: 38707936
does not play on iPhone platform

Platforms and Browsers

Windows: Firefox, Chrome, Opera, Safari, IE6, IE7, IE8, IE9
OSX: Safari, Firefox, Chrome, Opera
iOS: Mobile Safari: iPad, iPhone, iPod Touch
Android: Android 2.3 Browser
Blackberry: OS 7 Phone Browser, PlayBook Browser

but not scalable to the size I requested
Choose jPlayer

easy to get started, deploy in minutes
totally customizable and skinnable using HTML and CSS
lightweight - only 8KB minified and Gzipped

I used this plugin to build a player with a vinyl turning. you stop/start by clicking on the vinyl itself
0
 
LVL 1

Author Comment

by:day6
ID: 38707997
@leakim971

I can READ what they wrote too. Don't you think I took the time to check it out FIRST before ruling out them as an option. Totally customizable does NOT include the size I requested.  Give it up dude. That was the first option I went to before even posting this thread, so unless you can show me a deployed and operating version of what I need, give up on pushing a solution that WILL NOT MEET MY NEED. Sheesh!
0
 
LVL 83

Accepted Solution

by:
leakim971 earned 1000 total points
ID: 38708015
It took me less than a minute to customize it and give it 32px height size...
hope you will find something which fully answering your needs...
merry christmas
Clipboard01.jpg
0

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

New to live audio mixing? Member of a band who wants to improve the quality of your bands sound? Need to brush up on mixing techniques? Sick of subpar mixes? This is the article for you!
This article discusses how to implement server side field validation and display customized error messages to the client.
Viewers will learn the basics of using Ableton Live's advanced sampler instrument, Sampler. Load new Sampler into an empty MIDI track: Select a sample and drop it into sample window in Sampler: Adjust pitch if necessary with Root Key setting: …
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
Suggested Courses

872 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