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.
Related
The final device I'll be putting this on is an android TV box, but I'm testing on my galaxy s5. Both are having the same issue.
I'm using Full Screen Browser by Klurige, and I originally had some GIF's at the bottom of the page that I wanted to loop, but they ended up being to clunky and big to run efficiently on the TVbox, so I decided to switch over to html5. I've tried with WEBM and MP4, both are doing the same thing.
I have the autoplay and loop attributes in the html5 video as such:
<video id="zach" loop autoplay class="picture"><source src="P-Zach.webm">Error</video>
Neither works be default in the browser. I just see a gray video icon. I can't even click to start it.
I've tried formatting in different ways and everything mentioned on the broken-links.com blog post people keep pointing to. I've tried javascript .play() options. None do anything.
If I add the controls attribute to the video, I can play the video, so I know the video file works, but it still won't loop.
Any help?
Okay, so it looks like it has something to do with android blocking webview from letting javascript control the html5 video.
That, in combination with the lack of native support for loop or autoplay attributes made me ditch fullscreen browser and switch to the only browser I could find that DID support those - Firefox.
I used an app called Ful!screen (or something like that) to remove the notification bar, loaded firefox with the webpage (with html5 playing and looping perfectly) and scrolled down slightly to hide the top bar.
Tada! Fullscreen browser with html5 video instead of GIFs.
Solved my own issue another way.
I'd really love to know how to make a div play sound in an onclick event for the computer and other devices. And if there is a way to change an already existing piano script to work on other devices
The already existing code: jsfiddle.net/Nf68y
You can use a jQuery library like jPlayer for cross browser/device audio playback: http://jplayer.org/
But you might also just want to look in the html5 audio element, to see what that is all about :)
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.
Rather than repeat a long javascript for playing audio, here is the link: webpages.charter.net/jolove/Includes/play_song.js:.
This plays for any desktop browser (Mac or Windows), but not for my iPad.
Here is the calling website: webpages.charter.net/jolove/Escort_Folder/Dedication_Poem_iOS.html
This is really bugging me, so I would definitely appreciate any help on this, any help at all.
John Love
Not sure exactly what your question is, but you can use the HTML5 <audio> tag which is supported by the iPad. Check out http://developer.apple.com/safaridemos/audio.php or just google "HTML5 audio".
I'm almost forced to conclude that iPad will not play audio files.
Here is a very fresh site, where I use
the audio. But, this time, I got a button that says "cannot play audio file". For the sake of completeness, here is the included webpages.charter.net/jolove/Escort_Folder/js/play_song.js
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)