html5 audio player and .aif files on the web - audio

I have been asked to use aif audio files on a website. I am using jplayer.
Would there be a noticeable difference using .aif?
Which browsers support .aif?
Would you advise using .aif for the web?
Would it mean I would need 3 versions of each track to cover all Browsers/OS?
Like so:
<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
<source src="horse.aif" type="audio/aif">
Your browser does not support the audio element.
</audio>
Thanks :)

The most widely supported format currently is mp3, aiff is supported but you'd need to test target browsers to determine which offer support.
You might also consider SoundJS, a library I helped develop that lets you play audio across a broad range of browsers and devices using a single code base.
Hope that helps.

Check your own browser.
I could not find a comprehensive list like you have asked for. So this is the second best.

Related

Audio question - loading multiple files silently and using faders

Weird question, I apologise in advance.
I'm using Twine 1.4.2 to create music lessons for students. (Remote learning and Covid. It's such a drag.) https://twinery.org/
I jiggered the music macros from here, https://www.glorioustrainwrecks.com/node/5061, to make the 'loopsound' macro into a thing where I could loop multiple .oggs on passages at 0 volume. Then I could use 'fadeinsound' and 'fadeoutsound' like faders on a mixer - so a passage could fade a stem in, or out. The tracks all looped simultaneously, so it was like one big piece of music, with stems being faded in or out - when you went to the next web page.
This worked for several years - on almost all browsers. It's broken recently. Not sure why. Something to do with how audio files are loaded and browsers changing up their conventions? This Twine code has preload written into it.
Anyway. I was thinking of trying to do rewrite myself, with the audio element. I do not have the chops.
This is where I'm at. So, on the first passage (like a web page), I've got ...
<audio preload>
<source src="c1.ogg" type="audio/ogg">
<source src="c2.ogg" type="audio/ogg">
<source src="c3.ogg" type="audio/ogg">
</audio>`<audio preload>
<audio preload>
<source src="f1.ogg" type="audio/ogg">
<source src="f2.ogg" type="audio/ogg">
<source src="f3.ogg" type="audio/ogg">
</audio>
The 3 cs are supposed to loop in line. And the 3 fs.
On the next passage I have ...
<audio loop autoplay id="c1">
<source src="c1.ogg" type="audio/ogg"></audio>
<audio loop autoplay id="c1">
<source src="c2.ogg" type="audio/ogg"></audio>
<audio loop autoplay id="c1">
<source src="c3.ogg" type="audio/ogg"></audio>
This works. All of these play in line. (Like, not out of time with each other.)
So ...
How do I get them to all loop at zero volume?
How would I then get them to fade in or out at current time - on a new page? (Like, without restarting the track.)
Any help appreciated! Hopefully that made sense. It's a weird, niche project, really.
Thanks!
Meg
Fixed it.
Sort of. In case anyone comes looking for anything this weird in the future.
Couldn't use the audio element at all because each passage is a separate page. Had to rearrange the order of the macros within Twine. I know what I did, but I have no idea how to explain it.
If someone really does come looking for this in the future (probably one of my students - hello), post and I'll try to explain.
PS. Full credit to L for the macro code. I just messed with it. (I just made the loops play at 0 volume and not restart after fadeout. https://www.glorioustrainwrecks.com/node/5061

HTML5 Video(mp4 format) tag is not playing on linux OS

I have a problem of playing the html5 video(MP4 format) using video tag on linux. Could you please suggest What may be the problem or any alternative solution to make my video play on al l browsers along with all Operationg Systems.
Thanks in advance.
HTML5 doesn’t guarantee any particular video format will be supported by a browser; the solution is to use multiple sources:
A video, using the user agent default set of controls, with alternative sources:
<video controls>
<source src="http://media.w3.org/2010/05/sintel/trailer.mp4"
type='video/mp4; codecs="avc1, mp4a"'>
<source src="http://media.w3.org/2010/05/sintel/trailer.ogv"
type='video/ogg; codecs="theora, vorbis"'>
<p>Your user agent does not support the HTML5 Video element.</p>
</video>

mp3 audio works in all browsers but not IE9

I have three mp3 audio files that play fine in all browsers but play for only 1.x seconds in IE9 unless I change "controls" to "autoplay" in which case it plays just fine.
I was then sent the original, unedited file in .wav format. I encoded it myself to mp3 but have the same problem.
However, if I create my own mp3 audio file and insert it into the same markup, it works in all browsers, including IE9 with the "controls" attribute.
I can only think there is something about the settings in the original audio file that would cause the issue but don't have a clue what that could be.
Here is the test markup:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<audio src="poem.mp3" controls >
</body>
</html>
EDIT:
I put three audio files on the page. Sometimes one or two will play all the way through while the third won't play at all. Other times, two will play for a second but the third does nothing.
In case anyone is still dealing with this issue, I use the standard <audio> markup for mp3.
<audio controls="controls" preload="auto">
<source src="http://www.davehullthehullabalooer.com/help(5).mp4" type="audio/mp4"/>
<source src="http://www.davehullthehullabalooer.com/help.ogv" type="audio/ogv"/>
<source src="http://www.davehullthehullabalooer.com/help.webm" type="audio/webm"/>
<source src="http://davehullthehullabalooer.com/add-for-beatles-page-188.mp3" type="audio/mp3"/>
</audio>
In IE9: Internet options > Advanced Tab > Multimedia, I select "Play sounds in webpage"
All good!
EDIT: My fix didn't work. It still fails in IE9 but everything works still in every other browser.
An answer to my own question that solves the problem, at least, but I have not found out why.
I don't know why some mp3 files play just fine in IE9 but others, that also work well in any modern browser, won't play in IE9 using the markup I show above. I made audio play by adding the audio attribute preload="auto" and all is fine now in IE9.
Modern browsers do not need this. Why IE9 does, I do not know yet.
I was having trouble with audio controls showing on IE9 and found that IE9 struggles with the preload attribute. I didn't want the browser to preload all the files by setting them all to 'auto' but found that setting the preload setting to 'metadata' instead of 'none' did the trick. Could be an alternative solution.
http://helephant.com/2011/12/29/the-html5-audio-tag/ : "Metadata suggest that the browser just download enough of the file to find out things like dimensions, running length and size."
Ran into the same problem, audio files would only play first second when preload is set to metadata on IE9.
Turns out that my API was gzip compressing all responses and IE9 was having trouble dealing with it. After removing gzip/deflate compression from audio and video files, IE9 was fine with it.

HTML5 audio link masking?

I'm trying to create a mobile ready audio player. However, I'm wondering if it's possible to "mask" the src so that a user couldn't view source and download the mp3. I'm definitely a n00b, so any simple direction would be extremely helpful (IE - use 'x' to do 'y'). I don't necessarily need code examples. Thanks!
Current:
<audio src="unreleased_track01mp3">
...
</audio>
What I'd like:
<audio src="01238134781239871">
...
</audio>
No.
You could attempt to stream the audio, but if you want to play a specific file, the user will always be able to download it if the user is able to listen to it.

Best way to play wav files in the browser?

I have no choice but to play wav files directly in the browser (serverside encoding to mp3 isn't an option, unfortunately.)
What's the best way to do this? I'd really like to take advantage of the HTML 5 audio tag but my target audience includes many, many teens using IE6. As far as I'm aware flash isn't an option, but speedy playback really is critical.
Thanks.
Nowadays, the best way is probably just to use the HTML5 <audio> tag. In the past, you might have done it like this:
Background:
<embed src="bgsound.wav" hidden="true" autostart="true" loop="1">
On Click:
Play Sound
It's been a few years since the last answer. Embed tag was good but I had an issue trying to trigger it to play in JavaScript. New audio tag works well is most browsers.
<audio src="cat9.wav" preload></audio>
You can trigger it manually with audioElement.play()
<audio controls="controls"><source src="http://blablabla.com/hghghgh/my%20file.wav" type="audio/x-wav" /></audio>
Due to unfixed bug (issue from 2012 year?) sometimes Chromium-like browsers cannot play .wav from redirected URLs because they "think" that file size is zero. But .mp3 is OK.
Opera 12.14 and Firefox play from < audio >
tag normally in the same case (redirected URL).
I tried JPlayer's 2.9.* lib in Drupal 7 with 3 players, but not successful (was black inactive rectangle 300*14 pixels for each player).

Resources