I have been having a very strange and seemingly unlikely problem. I made a custom python server based off of SimpleHTTPServer, which requires me to set all my own headers. I started using it to serve .wav files and while they would play in an HTML5 tag in chrome they would not replay (via setting currentTime=0 and calling play() again). If I hosted them on standard Apache server, however, they would replay just fine. I open dev tools and slowly added and removed headers to my python server until they started playing properly. It turns out that the missing element was the "Accept-Ranges: bytes" header. Without it the wav file will not replay and with it everything works fine. Does anyone know why this happens?
I've found this same thing -- browsers require the Accept-Ranges header when playing audio via the <audio> tag. In my case, this was happening with MP3s (I didn't try with WAVs).
I don't know why that happens, but if you want to avoid it, use the new Web Audio API. In my experience, Chrome/Safari/Firefox will play (and replay) audio just fine without the Accept-Ranges header if you use the Web Audio API. Here's a good starter article.
Related
I have an asp.net web application that allows a user to record audio. I'm using code from https://github.com/nusofthq/Recordmp3js along with Matt Diamond's recorder files (modified for wav instead of mp3). Not sure if it matters but I'm using the updated API for mediaDevices.getUserMedia().
The recording works fine, the wav file is saved to disk, and if I listen to the file on disk I can hear the recording. However, if I try to play the audio back through the HTML5 audio control on the page, there is no sound. The length of the file matches what is on disk so I don't think it's because the audio control is unable to find the file.
I can post my Javascript if that will be helpful. I'm currently testing on localhost using Firefox. Firebug doesn't show any errors.
Please let me know if any additional information may be helpful.
Thank you!
The (quickest) solution was to reset Firefox. Wav files now play without any issues.
I'm using jw player to stream live rtmp streams off edgecast. The system works fine on my local server (wamp) but when I take the exact same code and put it on the (lamp) live server the rtmp streams don't work. Jw's controls don't come up but it throws no errors and chrome is showing all the files are loading fine.
The live server is just a git pull of what ever has been pushed from the test server so they should be identical code.
I'm really confused by this since it's all client side code in regards to the actual playing of the video... why is it acting differently on one domain and not the other? I've tried it with and without the jw license code and it makes no difference.
Figured this one out, after hours of banging my head against a wall; it turns out GIT is not super awesome for saving binary data such as SWF (which jwplayer uses for flash video display for rtmp streams!)
Answer: GIT was corrupting the jwplayer.flash.swf
Solution: Add .swf to git ignore list and don't store binary data in the repo! or add .swf binary to your.gitattributes
I have been trying to get this to run correctly so days now with no luck.
I have created a custom audio player, that accesses an MP3 on a S3 Amazon server. The audio player has custom controls enabled by Javascript, and a Audio Visualizer made possible by the Web Audio API.
Now the problem I am running into is this: Work fine on Chrome. Safari out right says it can't run the Web Audio API, but the audio will still play. In Firefox, the entire thing shuts down. Click play... nothing. I thought it was a CORS issue, so we set the proper headers on the server and still nothing. BUT... if I deactivate the Web Audio API visualizer, then I can get the player to play just fine.
http://jsfiddle.net/murphy1976/yqqf7uL1/1/
Here is my jFiddle. I have separated the Audio Player controls Script from the Visualizer Script with comments so you can see how it will work in Firefox, and how it will NOT work in Firefox.
I read somewhere that this issue that I'm running into MAY be a bug with Firefox. I just want to make sure so that I can stop beating my skull over this.
Could I put a call to CORS here?:
<source crossorigin="anonymous" src="audioFiles/35022797.mp3" id="srcMP3" type="audio/mp3">
The same-origin policy says that scripts run on some origin cannot read resources from another origin. (An origin is a domain, plus a scheme and port, like http://foo.example.com:80.)
Note that the same-origin policy does not prevent cross-origin media from being displayed to the user. Rather, it prevents scripts from programmatically reading cross-origin resources. Consider the <img> tag: a page on example.com can show a cross-origin image from other.com, but a script on example.com's page cannot read the contents of that image. The user can see it; the page cannot.
The Web Audio API can read the contents of audio files. If an audio file is from a different origin, this kind of reading is not allow by the same-origin policy. A user can listen to a cross-origin audio file, but a script on the page cannot read the contents of the file. When you attempt to feed a cross-origin audio file into an analyzer script (e.g., so that you can draw a visualization on a canvas), the same-origin policy should stop you. You are attempting to violate the same-origin policy, and the browser is correctly stopping you by refusing to play the audio in way that would allow you to read the file contents.
Note that Chrome does not prevent such cross-origin file reading for audio files, and this is incorrect behavior.
The correct solution is to have your media servers serve the audio files with a CORS Access-Control-Allow-Origin: * HTTP response header. However, this currently does not work in Firefox, which is incorrect behavior. If Firefox hopes to have a compliant implementation, this will be fixed eventually.
Confirmed that there is a bug in Firefox for using the createMediaElementSource method on a cross domain source:
https://bugzilla.mozilla.org/show_bug.cgi?id=937718
Basically trying to play some live audio streams in an app I'm porting to the browser.
Stream example: http://kzzp-fm.akacast.akamaistream.net/7/877/19757/v1/auth.akacast.akamaistream.net/kzzp-fm/
I have tried HTML5 audio tag and jPlayer with no luck. I know next to nothing about streaming audio, however, when I examine the HTTP response header the specified content type is "audio/aacp" (not sure if that helps).
I'm hoping someone with more knowledge of audio formats could point me in the right direction here.
The problem isn't with AAC+ being playable, the issue is with decoding the streaming ACC wrapper called ADTS. The Audio Data Transport Stream [pdf] or "MP4-contained AAC streamed over HTTP using the SHOUTcast protocol" can be decoded and therefore played by only a couple media players (e.g., foobar2000, Winamp, and VLC).
I had the same issue while trying to work with the SHOUTcast API to get HTML5 Audio playback for all the listed stations. Unfortunately it doesn't look like there's anything that can be done from our perspective, only the browser vendors can decide to add support for ADTS decoding. It is a documented issue in Chrome/WebKit. There are 60+ people (including myself) following the issue, which is marked as "WontFix".
I am building an Ajax Based application that will run on our local intranet network.
Now upon every return of request from my Ajax, I need to play a sound in my client browser.
I want to put a sound file (mp3/wav) in my web server (Tomcat) directory where the application will download
and play at the client browser. (I dont want to embed this and will just automatically play)
But I basically have this limitation.
Our target users intranet computers has no access to the outside internet since this is being block by our network team.
Most of the client runs on Windows XP and Flash might not be updated or not being installed.
I know a little jQuery but I dont know if what I am thinking is possible and what possible plugin can I use that is basically cross browser. My target browse runs on IE6/IE7/IE8/FF3.
Without flash and without a browser that supports HTML5 <audio> tags, that is going to be tough if not impossible.
My first idea was just to suggest http://www.w3schools.com/html5/tag_audio.asp. Usage
<audio src="/sound/ajax.mp3" id="ajaxdone"/>
// ajax success / readystate == 4
var mysound = $('#ajaxdone')[0];
mysound.play();
But that is also pretty much impossible in IE6 + 7.
In IE You could use <BGSOUND src= loop="1"> tag - append it and remove it before adding another.
I'm not sure which browsers accept that tag, and it's deprecated.