HTML: Why does embedded audio sometimes fail to play? - html

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.

Related

Firefox Streaming from Cache Instead of Live Stream

We built an internet radio streamer utilizing an icecast server streaming MP3 to Firefox via html5 audio tag. However, sometimes the streamer will stop for whatever reason (disconnection, etc) and when you restart the streamer, it begins streaming from the beginning of the session, which leads us to believe that its playing what is in the browser cache.
The only way to get streamer to play the actual live stream is to delete the history in Firefox. This doesn't happen in other browsers. This also happens if using the flash fallback instead of the html5 audio tag.
Thought about using the following script but didn't think it would apply to this scenario.
<meta http-equiv="Cache-control" content="no-cache" />
Any insight would be helpful. Thanks.
Note: See #MosheL's answer for a modern solution.
Old Answer (and probably still needed for SHOUTcast):
I've found that with SHOUTcast/Icecast streams, the only way to guarantee that you won't be playing from cache is to use the old method of adding a cache-busting URL parameter.
If your original stream URL is this:
http://1.2.3.4/someMountPoint
Then use JavaScript to generate a URL like this when playing:
http://1.2.3.4/someMountPoint?nocache=123456789
This ensures that caching will not happen, as to the browser, they are different resources.
icecast.xml
<http-headers>
<header name="Cache-control" value="no-cache" />
</http-headers>
Update (3/2020): on Chrome we need to solve one more problem with buffering live streams:
<audio controls preload="false" autoplay="false" .....

Is it possible to loop a list of videos?

The title pretty much says it all. I have a spot on a webpage that currently plays a video. I'd like to update the page such that I can add a line of code with a reference to a couple files located in a folder with the source, and the page will play the first video, then the second, etc. until it reaches the final video, and then play the first video again, looping indefinitely. It's extremely preferable that this line of code would be able to play video files, .swf files, pictures (for a pre-determined length of time), etc.
Currently, I'm just using a very rudimentary
<video width="100%" height="100%">
<embed loop="true" showcontrols="0" align="left" src="New Site Folder\DemoVid_sound_mods.avi"/>
</video>
The problem with this, though, is that it only plays one video, and if I want to add more parts to it, I have to edit the video itself, rather than just popping a new file in the folder.
I saw another question answered that mentioned doing this with javascript, but the whole point of this project is to make it exceptionally easy and quick to update. The main thing I'm looking for here is for us to be able to update the page by opening a file in notepad, adding a line of code, saving, and running it.
Any thoughts? Even just a pointer on what commands might be useful here would be helpful. Thanks in advance!
As far as I know you won't be able to do this with the inbuilt html5 video players native to the browser, It's just not the principle on which they are built.
What you are looking for is more of a media playlist style set of features.
You will have to use one of the javascript based html5 video players to get some of these features but even then I'm not sure of the support for swf and image files I've seen a few which do various videos and audio files but nothing HTML5 which also does swfs also as again, the premise of these players is usually to eradicate flash.
My best suggestion for doing all of these in one single embed is to use flash via the longtail/jw player or flowplayer which handles playlists etc or perhaps slideshowpro which I know does both images, video and I think audio too.
Finally.. harking back a decade or so. theres a Language which is pretty underused and suffers varied support called SMIL which supports all of these elements you mentioned however it's uptake sort of fell apart with the introduction of video in flash. I remember that Realplayer and Quicktime could serve SMIL files but I'd be pretty cautious to do anything in SMIL these days.
Hope that helps.
A

About embed midi files on a webpage

I am working on a project related to vintage web designs. I would like to embed and autoplay a midi file but:
It doesen't work on IOS (I tried with my ipad)
On Firefox, sometimes the tune is not played, I don't know why.
Does the midi player depends on the browser or a plugin?
Can I find a univeral alternative to play my tune?
I am using the <embed> tag this way:
<embed src="tune.mid" hidden="true" autostart="true" autoplay="true">
I've referenced this question before and fell upon the answer of using the library midijs.
However, since that lib now has a bitcoin miner included, I've made a variant without the mining code:
https://kitchwww.github.io/midi/midi.js
It can be included and used in exactly the same way:
<script type='text/javascript' src='https://kitchwww.github.io/midi/midi.js'></script>
<a href="#" onClick="function(){
MIDIjs.initAll();
MIDIjs.play('path/to/yoursong.midi');}">Play My Song</a>
EDIT: updated to include an init function to be called on a User Gesture, as all audio must now be initiated from one.
Yes, the embed tag is reserved for plugins, which Mobile Safari doesn't support.
Take a look at HTML5 audio tag, which is supported by most browsers.
But please don't play music on a webpage... it's annoying - most either listens to music, have the speakers turned off, or are at the office.
Your HTML is OK. The problem is that some lower class browsers have lost the ability to play midi files. They have to install an add on. Real Player used to be a good solution, but now they are pushing a cloud subscription. There are plenty of other midi players around, but the users have to install one.
Browsers dropped support for playing MIDI files natively over time. You might want to try MIDI.js, a JavaScript based cross browser library.
Add the MIDI.js script to your webpage:
<script type='text/javascript' src='http://www.midijs.net/lib/midi.js'></script>
And then add a link to start playing:
Play My Song
Take a look at http://www.midijs.net for details.
For mid, and kar files, I suggest using vanBasco midi player as your default player. See the source on http://midkar.com/blues/blues_01.html
To Embed;
embed src="musicfile.mid" width=144 height=60 autostart=true repeat=false loop=false
(replace the "musicfile.mid" with the name of your midi file)
Use the HTML5 Audio tag. But like The guy before me said.... please reconsider music on your page.
<audio src="example.midi" preload="auto" autoplay="autoplay"></audio>
Well, here it is Aug 13, 2017 and don't you know embedding a bg midi on a web page is still a mystery.
In fact I'm pretty certain it can't even be done anymore (except IE's bgsound src, which still works fine for me).
But as for Firefox and Chrome, the solution provided by jofeu is a great work-around.
I only wish there was a way to embed so the midi just starts playing on page load, without having to click anything. I guess those days are gone.

Embed volume control

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

Firefox 3.0.7 is crashing when embedding a PDF using the object tag

I'm attempting to embed a PDF file into a HTML page using the object tag. The following HTML crashes Firefox 3.0.7:
<object id="pdfObject40" type="application/pdf" data="/file.ashx?id=40" width="432" height="600">
<param name="src" value="/file.ashx?id=40" />
</object>
I don't have a problem in Internet Explorer.
Check the MIME-type the ‘file.ashx’ script is returning. If it's something other than application/pdf, or Content-Disposition is getting sent, there might be wrinkles.
Otherwise, it can only be (a) something odd in the document — do other documents load OK? — or (b) your setup.
In any case I would personally avoid ever embedding a PDF in a web page. A PDF plugin is a pretty inconvenient way to view a document, and the Adobe Reader plugin in particular is both historically awfully unreliable in IE, and also an ongoing security disaster. I'm advising all my clients to uninstall it ASAP.
I ended up using that code for IE and failing over to a link with a about:blank in Firefox. If any has a solution, feel free to add. I'll accept it down the road.
Incase anyone else has this problem, I ended up using object element tag with Firefox and embed element tag with everything else.
I think if I'd not been serving the PDF through an .ashx I could have used the embed tag for everything.
See: http://blogs.adobe.com/pdfdevjunkie/2007/08/using_the_html_embed_tag_to_di.html