Cross browser audio support (No Flash) - javascript

I want to have a small audio player on my website. It must have a play/pause and next and previous track buttons.
That's the easy part, but I want the player to work for I.E versions >= 6, FF, Safari and Chrome.
Are there any existing javascript/html solutions out there or perhaps you have done something similar before yourself and willing to share your solutions?

A lot of info is already in this old question
Cross-platform, cross-browser way to play sound using jQuery 1.4?
http://www.happyworm.com/jquery/jplayer/latest/demos.htm
Keep in mind that you won't find a complete cross-browser solution both for mobile and desktop that respond the very same way in each environment.
Choose your target first.

Related

Supporting Audio Tags in mobile Browser

is there any possibility to use the Tag in mobile browsers?
It only works in my Desktop-Browser and not on my smartphone.
I tried it with the -Tag and with adding it by Javascript, both doesn't work.
Can anyone help me?
I used this code:
var audio = document.create('audio');
audio.setAttribute('src', 'my-surce.mp3');
audio.play();
Thanks
First, you can check Cross-browser and cross-device audio for more info.
Otherwise its probably the easiest to use one of the libraries such as SoundJS, Howler or SoundManager2 but be warned: they all have one or two drawbacks which you won't be able to overcome. But audio should play normally most of the time on most devices with all of them if used properly...
SoundJS has mobile safe approach also which you might find interesting. Here you can check some demos and see if this is something you need.

Youtube Player API Difference (Chromeless vs IFrame) - Which is better?

So I have scoured the web on information on how to embed the Youtube players but actual detailed tutorials seem extremely sparse or completely non existent. In addition, although there is documentation found on the google site
it seems to be somewhat confusing for a novice on how to implement either which leads me to my question. It seems that there are two players, the IFrame player and the Chromeless player which uses an swf embed. I have gone ahead and provided examples of both:
IFrame Player(using angular): http://plnkr.co/edit/H5VnlPhOaa2n6ZsfSj5p?p=preview
Chromeless Player: http://plnkr.co/edit/Epz9uXDZ1uIiV4lgB0vw?p=preview
My question is, what is the difference? What is the advantage of using one over the other? Does one have more backwards compatibility with browsers? Mobile Support? The Chromeless player seems to require less code to run as most of the code runs out of the box from the included "swfobject.js".In addition it seems that the chromeless player does not work on iOS devices due to the flash requirement. Is this correct?
Addendum: You can see the iframe and chromeless player are mostly the same besides the fact that you can click on the iframe youtube player to pause it while the chromeless player can only be controlled from the play/pause controls.
One big benefit to using iFrames with Youtube is that it is basically a new window with a call back to youtube... and guess what? Youtube will interpret what browser and platform the request is coming from and populate the appropriate content BUT iFrame can be slow loading on older browsers and on mobile devices where object/embed would not. Parameter settings (to tune the user experience on your site) is roughly the same. We all know SWF files won't work on iOS so you might need to factor that into your development for your userbase.

JQuery sound - playing and stopping?

I wanted to implement something with JQuery (trying to avoid external plugins), that will play sound on clicking "play" and stop the sound by clicking "stop", and will also work cross-browser (including iPhone and iPad devices, so no flash).
Is there a solution to this?
I have only ever found external plugins..
Unfortunately no. For years the only way to play audio in the browser has always required a plugin. More recently, the HTML5 standard has provided a cross-browser standard for playing audio. Unfortunately many browsers still don't implement HTML5, so this doesn't really fix your problem either.

Is there a way to embed an mp3 player in a website that isn't flash based (so that the website is iPhone OS compatible)

I did a lot of searching for what I thought would be a pretty common question, but I came up with nothing. If there is another thread with a similar topic, please let me know.
Basically, I'm looking for a way to have an .mp3 file play in a website without relying on a flash-based player. I've searched w3 schools and every forum I can think of, but every media player I've found so far has been some sort of proprietary flash player.
Doesn't HTML support some sort of native player? I've found some that rely on Windows Media Player which is close, but I want the player to work on an iPhone and something tells me WMP won't get that done...
PS, as I'm thinking more about this this idea just popped into my head: a javascipt player and inside the <noscript> tag, put a flash player? I'm running a music blog (# http://www.freshoncampus.com) so the less code per post, the better...
Yes you can, with HTML 5.
This is a pretty good explanation of how you might go about doing this.
The caveat is that HTML5 support is not universal, but iOS devices (iphone) have a good start with supporting HTML5.
Edited to add:
From the question, it's hard to discern if you're looking for a way to play multiple mp3's with a nice gui interface, or just use audio as a background.
For the former, you will need to use Javascript to handle controls, and loading of the src element (I'd search for custom built javascript or jquery plugins to handle this).
For the latter, my solution above will work.
Also, background music in a webpage is highly annoying to most users, so caveat emptor.
You could go with something like http://www.schillmania.com/projects/soundmanager2/
which should autodetect the best option to play the sound.
jplayer? Not sure about MP3/OGG thing though...
First, HTML5's “audio” tag.
Second, you can use “embed” tag — it will play with whatever browser plugin is installed (not just WMP).
Not sure what would work in iPhone, though.
(and I might be wrong about exact tag names)

Play sound in mobile browser?

I want to make myself a web based stop watch for training that I can use on my Blackberry mobile browser.
The stopwatch should count 3 minutes, then ring a bell, wait 1 minute, then ring another bell and then repeat.
My problem is I can't seem to get sound to work on my blackberry browser.
I tried using <embed src="bell.wav"> which works fine in the browser of a normal computer, but it doesn't make a sound on my blackberry.
Should I build this stopwatch with Javascript and HTML or should I build it with flash?
According to the BlackBerry HTML Reference, the EMBED tag isn't supported. You might want to experiment with the OBJECT tag. One example I've seen to play embedded video in the browser is something like this:
<object height="288" width="352"
data="http://admin.example.com/_ipvideos/video_file_35.3gp"
type="video/3gpp" />
Something similar might work for simple audio files, too.
As for Flash, you're out of luck as none of the current BlackBerry browsers don't support it. If you're not having luck doing this in a webpage, you might want to bite the bullet and write a native app to do it. Or give BlackBerry Widgets a try.

Categories

Resources