HTML5 sound file player - ipad

I am trying to make a simple player in HTML5 that will allow the user to select an item from an option list and then play the appropriate sound file. I am targeting Mobile Safari, primarily.
I am trying to emulate this application I built a while ago in Flash:
http://www.finegardening.com/pguide/pronunciation-guide-to-botanical-latin.aspx
The following code I was able to mostly get to work on my local server, but only in Chrome Dev, and it would crash after playing more than one or two clips.
http://jsfiddle.net/smlombardi/7Wg7Y/
Can anyone give me some ideas on how to accomplish this? That is select an item, load the sound file associated with that item, play the file onClick with a button, then discard the file and load another onChange of the list.

try to use this html5 sound library.
http://buzz.jaysalvat.com/
Good Luck.

Related

Youtube API 3 get latest videos - but I want the URL to just open and PLAY that video

So, I have read numerous sites and a bunch of code that can find "the newest video" uploaded or Published, but NONE of them show how to format a URL LINK to just open THAT most recent video in a new tab/window and PLAY it.
I am missing something, obviously, and would love direction and help.
Here is the code that locates the correct video listing...
https://www.googleapis.com/youtube/v3/search?part=snippet&channelId=Myin&maxResults=1&order=date&type=video&key=MyinAlso
And it literally shows up in a new tab, but just white code on a black background - NO VIDEO.
I would love this URL to just open and play that Newest uploaded/streamed video.
I have tried appending "watch?v=" with such items as "playnext=1&index=1", "videos.xml?channel_id=Myin&orderedby=published&playnext=1&index=1" and many other variations of these and other switches/directories/commands - all as links only.
By channel, playlist {when correct one is chosen} works using some variation - but - the newest Live uploaded video only exists in a non-existent list under "/streams", named or "filtered" as "Recently Uploaded" on the "LIVE" tab, or also in another non-existent List/category on the "Home" tab, named "Past Live Streams".
I just want a link that I never have to change, to play the Most Recently Uploaded Live video. This should NOT be this hard and frustrating.

iOS Safari file input [Take Photo] capture = Pano

On iOS Safari, and clicking to input a file with accept image/*, I get the [Take Photo] option. When I touch that I'd like the option for Pano, to be available, but it's not.
Basically I created a demo where you can upload an iOS Pano and vie it in 360. Works great, but the user has to upload a previously shot Pano, and not take one realtime.
Was hoping something like capture="pano" or accept="image/*;capture=pano" as the file input's attribute, would do the trick.
Anyone know a way this could be done, or do I need to do a dev request at Apple?

Stream to VLC for iOS via URL Scheme

I'm trying to link to the iOS VLC app via its URL scheme. I need to open a FLV file(preferably as a stream, rather than downloading). I have tried vlc://http://domain.com/path/to/video.flv which opens VLC with a popup asking if I would like to play or download. Tapping download works, however play doesn't do anything except close the popup(I can get it to eventually work if I tap Play in the popup -> Play in Control Centre -> tap back in VLC). Is there a way to get it to play by directly through the URL?
Bonus points if you figure out how to select the "Scan for Subtitles" option in the "Open Network Stream" section of VLC. ;)
I've looked all over Google and can't find any documentation of the URL scheme. Any help is greatly appreciated.
the vlc:// pseudo protocol is broken in the current 2.6.4 release - it is fixed in 2.6.5 which is currently waiting for review by Apple. I hope that it will be out this week but this is beyond our control.
Generally speaking, I recommend to use another protocol though based on x-callback-url, documented on our wiki: https://wiki.videolan.org/Documentation:IOS/#x-callback-url
Regarding an extra subtitles URL, this is currently not supported. We could add it though, it's just that nobody asked for it so far.
For those who want to add subtitle it has been added in this commit and can be used like this:
vlc-x-callback://x-callback-url/stream?url=http://example.com/dogs.mp4&sub=https://example.com/dogs.srt

XNA Microphone in Windows Phone App Doesn't Work When Page is Navigated to a Second Time

I have a Windows phone app with a page that uses the XNA Microphone and has a record button and play back button, very similar to any number of tutorials online. When I first navigate to the page the record and play functionality works fine. However, if I click the back button, then navigate to the page again, the sound recorded sounds like a part of the spoken word repeated a couple of times. For example, I'll record "testing" and the playback sounds like "sss...sss". Any ideas?
I figured it out. The following line is in the page's constructor:
this.MicroPhone.BufferReady += new EventHandler(this.Microphone_BufferReady);
A new page gets constructed on every navigation to the page, therefore the Microphone_BufferReady function in multiple instances of the same page object was getting called and the data from the microphone was occasionally being stored in other instances. The key is to remove the handler in the OnNavigatedFrom page event:
this.MicroPhone.BufferReady -= new EventHandler(this.Microphone_BufferReady);

Player performs differently across browsers

I'm trying to find a player that actually works with HTML5 and wordpress and yours has come close.
I'm on an Apache server hosted through godaddy.
The link below is the page I'm testing on. In Chrome it auto loads one version while still showing the play button. Upon hitting play, another version starts, thus two playing at once.
In firefox it just won't load at all. the poster frame shows, but video never plays (according to godaddy the ogg/ogv mime type is there.)
In safari it works fine.
http://parkmultimedia.com/test/
Here is the code i'm using -
[video mp4="http://www.parkmultimedia.com/flv/2012-reel.mp4" webm="http://www.parkmultimedia.com/flv/2012-reel.webm" ogg="http://www.parkmultimedia.com/flv/2012-reel.ogg" flv="http://www.parkmultimedia.com/flv/2012-reel.flv" poster="http://www.parkmultimedia.com/flv/webstill.png" preload="true" autoplay="false" width="480" height="272" align="center"]
Any help would be appreciated!
Dan
UPDATE
OK, I've managed to get the above page to work after some tinkering. Chrome, Safari, Firefox all seem to work no. I'm going to have opera and PC friends test IE.
Fix - Set the default video to mp4 and I used this code -
[video flv="http://www.parkmultimedia.com/flv/2012-reel.flv" mp4="http://www.parkmultimedia.com/flv/2012-reel.mp4" poster="http://www.parkmultimedia.com/flv/webstill.png" preload="true" autoplay="false" width="480" height="270"]
Using my iPod (yes pod, not pad) I get the play button with a line through it...though I also get the loading wheel...it just keeps loading.
Also, and I will search for this, but also an issue - in the new and old script I have autoplay set to false, but in Chrome and Safari it does it anyway. Is there an override setting or a way to control by browser?
Lastly, is there a way to center the player and not have it aligned left?
Thanks for any assistance, Dan

Resources