We run an IIS 7 server hosting a site that plays short 10-20 second MP3's. The code we use for our player is:
<audio autoplay="autoplay" controls id="audio_player" preload="auto" >
<source id="mp3_src" src="path_to_mp3/clip.mp3" type="audio/mpeg">
<source id="ogg_src" src="path_to_ogg/clip.ogg" type="audio/ogg">
<!-- BEGIN fallback -->
<object type="application/x-shockwave-flash" data="/flash_mp3_player.swf" width="340" height="50">
<param name="movie" value="/flash_mp3_player.swf" />
<param name="wmode" value="transparent" />
<param name="flashvars" value="filename=path_to_mp3/clip.mp3;autostart=true" />
<embed href="html5-mp3player.swf" width="340" height="50" name="player" align="" type="application/x-shockwave-flash" flashvars="filename=path_to_mp3/clip.mp3;autostart=true"/>
</object>
<!-- END fallback -->
For most users, this is not an issue. We serve and play about 50 clips every few minutes, and have users on almost every major platform that you'd expect (Win XP-8, OS X 10.4+, iOS 5+, Android 2+, etc.).
Recently, as our work load has increased, we're seeing a large number of people who say the clips aren't playing for them. Most of the time we hear of no specific error, but when we do, it's almost always IE9+ reporting "Error: Unknown file type or invalid file path".
At this point, we're stumped. The IIS box is not struggling physically, and this site is the only one on it. Below are a list of variables about the environment that may help.
Windows Server 2008 with IIS 7
MIME types are configured properly
MP3 clips live on a virtual directory, although some are on the server itself. Both locations can fail to play
There are no errors logged by IIS during a fail to play for a client
This happens at all times of the day and night
This happens seemingly randomly with over 200,000 different files
All MP3's are encoded at 128kbps # 44100
The HTML5 and Flash portions are both prone to failure
Usually, requests are 206, although it isn't uncommon to see 200 responses
There's 1 application pool set up for the site and configured to use only 1 worker process
We have never been able to reproduce the error, either on or off of the network the site is served from
Often, users can refresh (multiple times) and actually get the clip loaded and played through
Any help or a point in the right direction would be greatly appreciated.
Thanks!
We've done several things to try and solve this issue. We moved a portion of the media to an aws s3 bucket and refactored some code.
Essentially, we were adding listeners to the audio element by ID and by tag reference and those were both called from two different locations. After we consolidated the code to stay in the external js file, and set all listeners within a function that gets called from the ajax page, things seemed to start working out.
We still see some (very few) issues with IE9+, but have an error listener monitoring this. Each time a user reports an error, the error listeners reports a status code of 4 (MEDIA_ERR_SRC_NOT_SUPPORTED), which is odd.
So, problem is mostly fixed. Now to track down the error code 4 for IE (even though all files will eventually play through it). Perhaps it has something to do with the media player installed on the machine that's in charge of MP3 playback?
Related
Over the past few days, we noticed that our videos quit streaming using MediaElement.js Version 2.11.3 and Chrome Version 50.0.2661.94 (64-bit)
Videos still play in Firefox and Safari without a problem.
The error we receive in the Chrome Dev Tools is:
Uncaught (in promise) DOMException: The element has no supported sources.
The markup on the rendered page looks like this:
<video height="150" poster="https://xxxxxxxxxx.cloudfront.net/123423_1_thumb.jpg" preload="auto" width="200" src="" hidden-source="https://xxxxxxx.cloudfront.net/123423_1_wm.webm">
<object data="flashmediaelement.swf" height="150" type="application/x-shockwave-flash" width="200">
<param name="movie" value="flashmediaelement.swf">
<param name="flashvars" value="controls=true&file=http://s38zby1czkz3d7.cloudfront.net/123423_1_wm.mp4">
</object>
</video>
Here are some images of the errors to make it a little more clear:
Here are the error messages in the console:
I could replicate this problem with Chromium 51.
However it appears this problem does not occur anymore with Chrome 53.
Unfortunately I have been unable to find an easily readable confirmation on the Internet, that this was a confirmed bug for Chromium/Chrome that got fixed, but just indications that several people reported issues with Chrome/Chromium versions. e.g. here
Videos no longer streaming with mediaelement.js in Chrome
where Google Chrome Developer cwilso points to this internal chromium mailing list, but whose contents are rather cryptic without further research. It appears to be related to a switch called ENABLE_BROWSER_CDMS and the EME implementation for DRM support, that was not working as it was supposed to.
https://groups.google.com/a/chromium.org/forum/#!topic/chromium-reviews/Qi4dLcKjcCM
That is because since Chrome 50 a play() call on a <video> or an <audio> element returns a Promise. If playback succeeds, the Promise is fulfilled, and if playback fails, the Promise is rejected along with an error message explaining the failure.
You can find some examples and more information here: https://developers.google.com/web/updates/2016/03/play-returns-promise?hl=en
It also can be a CORS issue. Set media.crossOrigin = 'anonymous'; And make sure that the server response has the header Access-Control-Allow-Origin: *. Or instead of the asterisk wildcard, specify the domain of the website that is allowed to access the video from the server.
I've a Windows Media Player box on me page, but...
The Windows Media Player will overlap every peace of html code how can I get it to the back and that I can still use it? And my second problem is that everybody that visit my page needed a plugin for loading it, but veryone has Windows Media Player installed on his PC? Who can help me and explain something :< Thanks already :D
<object id='mediaplayer' classid='clsid:6bf52a52-394a-11d3-b153-00c04f79faa6' type='application/x-oleobject' width='100%' height='150px'>
<param name='url' value='SONG.mp3'/>
<param name='autostart' value='1'/>
<param name='showcontrols' value='1'/>
<param name='stretchtofit' value='0'/>
<param name='enablecontextmenu' value='0'/>
<param name='ShowStatusBar' value='1'>
<embed src='SONG.mp3' width='100%' height='150px' autostart='1' type='application/x-
mplayer2' pluginspage='http://www.microsoft.com/Windows/MediaPlayer/'
transparentatstart='0' animationatstart='0' showcontrols='1' autosize='0' displaysize='0'
showtracker='0' ShowStatusBar='1'></embed>
The first part of your question is difficult to answer without some sample code to work with.
I would recommend added a presized container div to hold the player in your desired location on the page.
To answer the senond part of your question.
Embedding media player in your webpage means users will be executing the file through their web browser. A plugin for the users specific browser is required to play back the files.
This is standalone from windows media player and will allow users who do not have media player to play the files from their desired browser and operating system.
If you want people to use there installed media player then a link to download the file and execute it on their own computer is required.
Using embed to embed music might sound oldschool, but I don't have any other choice (any method used now doesn't accept my files).
<embed hidden="true" volume="10" src="/app/upload/1287860161768038.mp3" />
Music starts to play, but volume is always 100% (not 10 like here). I don't know how to repair it, suggestions?
The player that is going to be used will be whatever player is installed on the system to handle mp3 content so results may be a bit random.
Yahoo and several others have javascripts that make embedding mp3 a lot easier, you don't need to go through the troubles of having the right plugins installed.
http://mediaplayer.yahoo.com/
http://code.google.com/p/mp3player/
Type= can be used to control which player and which controls
TYPE="application/x-mplayer2" would normally be Windows Media player
TYPE="audio/mpeg" would normally be quicktime.
Using a script removes these browser vs browser headaches.
It appears from something that I just read, that if you want to set the Audio Volume to 10%, then the correct 'amount' would be 0.10
http://www.w3schools.com/tags/av_prop_volume.asp
I have created an application using Adobe Flex. I took all the files from the 'bin-release' folder and put it on the server. Then when someone connected to the server through http it is forwarded to the "index.htm". The "index.htm" page is the HTML page created automagically by Adobe Flex during compile time, I just renamed it to that name (from visco.html if it matters). The SWF file remained the same.
The problem is that most of the time when I go to the server, I get forwarded to the "index.htm" file and it loads the SWF perfectly. The other 30% of the time, it doesnt load! The background of the page turns blue (same as my SWF) and if I right-click it, it shows an Adobe Flash dropdown, so it looks like its sort of loading, but the application doesnt fully start even though it has been 100% reliable during debugging and when loading the SWF file manually.
What do I need to do to get the SWF file to load and start reliably?
here is where I embed the SWF file:
<noscript>
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
id="visco" width="100%" height="100%"
codebase="http://fpdownload.macromedia.com/get/flashplayer/current/swflash.cab">
<param name="movie" value="visco.swf" />
<param name="quality" value="high" />
<param name="bgcolor" value="#869ca7" />
<param name="allowScriptAccess" value="sameDomain" />
<embed src="visco.swf" quality="high" bgcolor="#869ca7"
width="100%" height="100%" name="visco" align="middle"
play="true"
loop="false"
quality="high"
allowScriptAccess="sameDomain"
type="application/x-shockwave-flash"
pluginspage="http://www.adobe.com/go/getflashplayer">
</embed>
</object>
It turns out the problem was with the embedded board used to serve the SWF file, not the file itself.
It sounds like it is throwing an exception somewhere and failing silently (roll on FP10.1!!).
Upload a debug version to the server and try and re-create. It will give you more information than a blank screen.
Remember that if you upload a debug version, you can debug remotely from Flex Builder (which is always a plus).
If it fails in production but not in testing, that usually suggests bad data, hardcoded URLs (localhost being the biggest culprit), or timing issues.
Your first job is to find what the exact conditions it's failing under, and for that you'll need a debug build.
try installing the debug player in your browser and it should popup the stack trace dialog that should give you a clue what's wrong if the app throws an exception like gregor suggested. other debugging methods on a release build is to use firebug network monitor tool which can show if the app is making a call to a url that returns 404 and maybe the app is not handling the error. but that's limited to this. some other ideas i can think of is that in your oncomplete/initialize/preinitialize event you are trying to access a null object or property so the app stops there and prevents it from loading.
The problem was actually with the hardware used to serve up the SWF file. The code used to access the SD card (where the SWF was stored) wasn't working quite right.
I am experiencing some strange behavior of embedded audio (wav file) on HTML page.
I've got a page https://server.com/listen-to-sound, and a Wav file embedded in it via <EMBED/> tag, like this:
<embed src='https://server.com/path-to-sound' hidden="true" autostart="true" />
The page https://server.com/listen-to-sound is opened in IE 6 SP3 on machine#1 - the sound is played in the headphones.
The same page is opened on another machine(#2), with exactly same IE 6 SP3 version, privacy and proxy settings - there's no sound.
Totally, from 6 machines the sound is played on 2 and not played on 4. From these 4 machines, when the page https://server.com/listen-to-sound is opened in Opera, the sound is played.
I've triple-checked headphone connections, volume settings and other possible hardware and software driver issues: the problem is definitely in IE settings.
I've also checked https://server.com/path.to.sound URL - the 4 machnies that do not play sound fail to open this link, failing with an error like "Failed to download page".
Cleaning IE caches, temporary internet files, SSL certificate caches did not solve the problem either.
Googling gave me nothing special but old Flash trick to use <OBJECT> tag and <EMBED> tag to be written in Object's comments.
What have I missed? Have you experienced similar or related problems? How were they solved?
Do you have any suggestions on where the trick is? Do you know some IE "features" that might affect execution(playing, showing) of embedded objects?
I think the main reason is acting different on each computer/browser you're using is because it is a non-standard tag.
Getting media to play inside a web page has always been a bit of a pain. You may try something like this:
<object type="audio/x-wav" data="data/test.wav" width="200" height="20">
<param name="src" value="data/test.wav">
<param name="autoplay" value="false">
<param name="autoStart" value="0">
alt : test.wav
</object>
The above was taken from this site explaining how to use the object tag.
I have not found the solution, but I can confirm that the likely problem is the https:. I have found that windows media player does not play files with a full url/src leading to https. However, quicktime will. So, computers with quicktime will successfully play the file back while those with only WMP will fail.
One "solution" is to link to the http: (non-secure) version of the file.
I could'nt find any informations on this, but have you tried playing sound from Javascript ? I don't know if it's a viable workaround for you but this might be a solution.
You can find different ways to do it here: http://www.phon.ucl.ac.uk/home/mark/audio/play.htm
Hope that will help you.
In regard to your comment to jamesh, I would advise to provide instead a link to the audio file: some computers (mine at work) have no sound, not everybody is using IE, embed isn't part of HTML (it is a hack supported by various browsers, it isn't defined in HTML 4.01 Transitional DTD for example) and chances are the visiting browser have no plug-in to play your sound.
As your tests show, it is prone to problems...
At worst, provide a <NOEMBED> tag to supply the said link. Or nest various methods, like <object>. At least, Flash is supported by nearly all browsers.
Somewhere along the way, browsers changed operations like using flash and playing audio. I have tried java, html embeded code none is exact.. the only thing i noticed is if you make a link on another page to the page that suppose to play the music it will work every time. but many times it wont play if you take and put your music page url in url box.. the link is reliable to the music page.. Don't know why?
I have been working for a while on it. and of course there the difference between all the various browsers. The embedded code embed src='https://server.com/path-to-sound' hidden="true" autostart="true" />you showed before should work as long a sound file is there and if placed as first line after body statement.