new Audio('sounds/mysound.mp3').play();
Im using the above javascript to play sounds on a web project, everything works fine at home on my laptop which is running Windows 7 , tested in both Firefox, and Google Chrome.
The problem i have is that on Windows XP, the sounds wont play at all? I do understand that browser support for the above is a bit sketchy at the moment, as mp3 is not fully supported apparently, in firefox for example.. so im a bit confused?? why does it play on my windows 7 machine, but not on windows xp machines, even in the same browser?
I may well have to look at doing the sounds with a plugin or something, can jPlayer play sounds with no visbable player icons etc.. as all the demos show some form of player on screen?
Any help appreciated.
Thanks Paul
EDIT***
I think if OGG files will work, i`ll have to have both sound file formats in my sounds folder, and then use a javascript variable to add the .ext required depending on what broswer is being used.
check which browser
extVariable = either '.mp3' or '.ogg' accordingly
new Audio('sounds/mysound'+extVariable).play();
That way i dont need if else statments everytime i wish to call a sound :) just set the .ext variable up at the top of page.
i made the following audio test over at http://codepen.io/PaulBrUK1972/full/pGdza
and just as i thought using windows XP, the ogg file will play in firefox, but the mp3 wont. It would be interesting to know if the mp3 plays on other peoples windows 7 machines, like it does on mine, even though it shouldnt??
Firefox relies on codex available on the machine to play mp3 to get around licensing issues, so that could cause issues.
If you are looking for a sound library to abstract away the issues of supporting audio on browsers with variable support, I'd recommend SoundJS, which I help develop. It uses the latest audio standards when available, and has a flash fallback for older browsers and systems. using SoundJS, you can write a single codebase that is broadly supported, including on mobile devices.
Hope that helps.
Internet Explorer 9+ can play: MP3
Firefox 3.6+ can play: WAV and OGG
Chrome 3+ can play: MP3 and OGG
Safari 4+ can play: MP3 and WAV
Opera 9.5+ can play: WAV and OGG
The above is the list of music file types that can be played in the given browser, that is something i took from the book Pro HTML5 Games - Aditya Ravi Shankar. It's a good book i am still working through it though.
If the browser is not causing an issue you should check the following:
Check you have speakers/headset/earphones plugged in.
Check that the volume is not too low.
Check that other audio is working on your PC, play a track on YouTube, or some media player.
Check the sound/volume settings and adjust the settings, you may be sending audio out the incorrect channels.
Check that you have an up to date sound driver.
If that doesn't work check that your sound card is not broken.
What most html5 sound libraries, such as sm2, do to get around the fact that some browsers support only certain audio types is call document.createElement("audio").canPlayType(type) before creating the audio element for the sound.
So I suggest you make a helper function in creating your audio sounds that could look something as what follows (sorry if theres errors untested):
var audioTypes = {
"ogg": "audio/ogg",
"mp3": "audio/mp3"//etc
}
//src is an array of sources for a type
var createAudio = function(src, options) {
var audio = document.createElement("audio");
for (var i = 0; i < src.length; i++) {
var type = src[i].slice(src[i].lastIndexOf(".") + 1);
if(audio.canPlayType(audioTypes[type]) {
audio.type = audioTypes[type];
audio.src = src[i];
return audio;
}
}
throw "Unsupported audio";
}
Now just call
var mySound = createAudio(["sounds/mySound.ogg", "sounds/mySound.mp3"]);
Related
I am using the following implementation in some JS code to get durations of audio files loaded in: http://jsfiddle.net/derickbailey/s4P2v/ (Taken from https://lostechies.com/derickbailey/2013/09/23/getting-audio-file-information-with-htmls-file-api-and-audio-element/.)
My implementation is the same, even using createObjectURL. It works with MP3, AAC (.m4a), and FLAC fine, but not ALAC (also .m4a).
let length = 0;
let url = URL.createObjectURL(file);
let audio = new Audio(url);
audio.addEventListener('loadeddata', function () {
length = audio.duration;
}
Does anyone know how I can get the duration of ALAC files using pure JavaScript? I am not using any frameworks and am new to JS.
Thanks
In the article Web audio codec guide on MDN it shows only Safari in the browser support section for the ALAC codec.
Here is the full Browser compatibility table from that article:
Feature
Chrome
Edge
Firefox
Internet Explorer
Opera
Safari
ALAC support
No
No
No
No
No
Yes
I think only Safari is able to natively decode ALAC codec, and there, it works.
But in all other browsers, since they can't decode it, they won't be able to give you the correct duration.
ffmpeg seems to be able to decode it though and to get its duration, so you may want to grab this info from server side, or have a look at this project which aims to port ffmpeg to js.
I never tried it myself, but it claims to have ported the mp4 decoder, so you might have some luck in there.
In Safari (11), a static audio file loaded into a src via html or javascript works, albeit with the limitations of requiring user input before playing.
ex.
<audio src="static.mp3">
or
var audio = new Audio('static.mp3');
audio.play();
work fine.
However, I need to load audio files from the database, so I was using a controller action like so:
public FileContentResult GetAudio(int audioId)
{
if (!DbContext.Audios.Any(a => a.Id == audioId))
{
return null;
}
var audio = DbContext.Audios.Single(a => a.Id == audioId);
return File(audio.File, "audio/mp3");
}
and set like
<audio src="getaudio?audioId=1">
or
var audio = new Audio('getaudio?audioId=1');
it will not play in MacOS (Safari) or iOS, but works fine in Chrome and Edge (except on iOS). Depending on how I configure things, I get some form of Unhandled Promise error. I've also tried loading into a Web Audio buffer, with the same exact success and failures.
Does anyone have a solution or workaround to load my audio files on Safari?
EDIT
Ok, so on further testing, I discovered that it's not so much whether the files were sent via action or static file, it's how they were saved to the database in the first place. I'm now working to figure out why files I save (as byte[]) and then reload are not recognized by Safari.
OK, so it turns out, I was making the recordings with MediaRecorder, which is a fairly new feature in Chrome and a few other browsers. It didn't matter what format I told it to save as, because only webm is supported. And guess who doesn't support webm format? Safari. Any other browser was picking it up fine, regardless of what incorrect extension I put on the file.
When I find a webm to m4a conversion, I will add it here. I'm sure there are some solutions out there.
I'm writing a Webradio Player for Firefox OS (mobilephone OS based on webstandards). Now I want to add a feature, that displays for example the actual Title like some radiostations are sending and VLC-Mediaplayer for example is able to display. All tested streams are using MP3. I'm playing the audio via the html-audio-tag. Until now i've tested https://github.com/aadsm/JavaScript-ID3-Reader and http://ericbidelman.tumblr.com/post/8343485440/reading-mp3-id3-tags-in-javascript. The JavaScript-ID3-Reader seams not to be able to handle streams. The other way doesn't writes an log via "console.log(title);". Does anybody know a way to add this feature?
Thanks
I've found out that it is impossible this way. But there is a much easier way:
var meta = document.getElementById("audio").mozGetMetadata();
The id audio refers to a audio tag. You can acces the title by meta.title. But there is a bug in firefox (firefox os, too) that causes that this isn't working with mp3-streams: https://bugzilla.mozilla.org/show_bug.cgi?id=908902
I'm trying to play an mp3 file and I want to jump to specific location in the file. In Chrome 33 on Windows, the file jumps the correct position (as compared with VLC playing the mp3 locally) but in Firefox 28 on Windows it plays too far forward and in Internet Explorer 11 it plays too far behind.
It used to work correctly in Firefox 27 and earlier.
Is there a better way of doing this?
EDIT: The problem doesn't even require SoundManager2. You can replicate the same issue with just the <audio> tag in Firefox. These two lines are all the code you need to reproduce it:
<audio autoplay id="audio" src="http://ivdemo.chaseits.co.uk/enron/20050204-4026(7550490)a.mp3" controls preload></audio>
<button onclick="javascript:document.getElementById('audio').currentTime = 10;">Jump to 10 secs "...be with us in, er, 1 minute... ok" </button>
Try it here: http://jsfiddle.net/cpickard/29Gt3/
EDIT: Tried with Firefox Nightly, no improvement. I have reported it as bug 994561 in bugzilla. Still looking for a workaround for now.
The problem lies in the VBR encoding of the mp3.
Download that mp3 to disk and convert it to fixed bit rate, say with Audacity.
Run the example from disk:
<audio autoplay id="audio" src="./converted.mp3" controls preload></audio>
<button onclick="javascript:document.getElementById('audio').currentTime = 10;">
Jump to 10 secs "...be with us in, er, 1 minute... ok" </button>
and it works fine for me.
So my suggestion for workaround is is to upload an alternative fixed-bit mp3 file in place of the one you are using. Then it should work in the current FFx.
I work on SoundJS and while implementing audio sprites recently ran into similar issues. According to the spec, setting the position of html audio playhead can be inaccurate by up to 300ms. So that could explain some of the issues you are seeing.
Interestingly, your fiddle plays correctly for me in FF 28 on win 8.1 if I just let it play through from the start.
There are also some known issues with audio length accuracy that may also have an effect, which you can read about here.
If you want precision, I would definitely recommend using Web Audio where possible or a library like SoundJS.
Hope that helps.
I met the same issue, and I solved it by converting my MP3 file to the CBR(Constant Bit Rate) format. Then, it can solve the inconsistent issue between the currentTime and the real sound.
Choose the CBR format
Steps:
Download and install "Audacity" (it's a free for any platform)
Open your MP3 file
Click [File] -> [Export] -> [Options] -> [Constant] (See: Converting MP3 to Constant Bit Rate)
Audacity will ask you to provide the LAME MP3 encoder
(See: [download and install the LAME MP3 encoder])
There will be no inconsistent/asynchronous issue.
Also see:
HTML5 audio starts from the wrong position in Firefox
Inconsistent seeking in HTML5 Audio player
tsungjung411#gmail.com
I just tried your code with another audio url here, it seemed to work and i did not experience a delay of any sort in Firefox( v29) which i did previously.
<audio autoplay id="audio" src="http://mediaelementjs.com/media/AirReview-Landmarks-02-ChasingCorporate.mp3" controls preload></audio>
I guess to jump around an audio file, your server must be configured properly.
The client sends byte range requests to seek and play certain regions of a file, so the server must response adequately:
In order to support seeking and playing back regions of the media that
aren't yet downloaded, Gecko uses HTTP 1.1 byte-range requests to
retrieve the media from the seek target position. In addition, if you
don't serve X-Content-Duration headers, Gecko uses byte-range requests
to seek to the end of the media (assuming you serve the Content-Length
header) in order to determine the duration of the media.
Hope this helps..
You could also try looking into Web Audio API for sound-effect-like playback which gives you some guarantees about the playback delays.
After testing the fiddle it is noticable that there is some issue with FF , anywho , after searching sometime , the issue is due to "Performance lag" , but the good news is that someone has found a solution to that issue , you may want to read this :
http://lowlag.alienbill.com/
a single script will solve it all.
Ok, my new website has just gone live, delivered through Google Apps. On a lark, I decided to include a javascript / HTML5 Lunar Lander clone (Martian Lander) which I wrote as an exercise a while back. The game works fine when I open it locally, but when it's delivered through GAE, the sounds don't seem to load on every system. In mobile safari, none of them load. In safari on the desktop, they all load reliably on my computer, but not on some other computers. In Chrome (on the desktop) it seems to work, but in Chrome in iOS, only one sound loads. On the desktop, it always seems to be the same sound which fails to load (explode1.mp3), which is the smallest of the sounds I'm loading. As you can see, if you click that link, the sound downloads fine from the server...
At first the problem seemed to be related to case sensitivity, so I switched the case in the filename, but that fix didn't keep working. This is a problem, as my loading bar is directly tied to how many resources have loaded, so it just sits there waiting for a GET request with no reply... Has anyone experienced anything like this, where a GET receives no reply on a specific resource, but loading the resource directly works fine?
I should say that I'm very new to most of these technologies, so it seems quite likely to me that I just made some novice mistake. Unfortunately, I'm not sure what those novice mistakes would be, seeing as I'm a novice!
Here's the code I use to load the sounds:
function loadSound(soundName) {
var newElement = document.createElement("audio");
newElement.addEventListener("canplaythrough", assetLoaded, false);
document.body.appendChild(newElement);
var audioType = supportedAudioFormat(newElement);
if (audioType == "") {
alert("no audio support");
return;
}
newElement.setAttribute("src", "lander/sounds/" + soundName + "." + audioType);
console.log("loading sound " + newElement.src + "...");
return newElement;
}
and...
function assetLoaded() {
var assetName = this.src;
numAssetsLoaded++;
console.log("loaded asset " + numAssetsLoaded + " (" + assetName + ")");
if (numAssetsLoaded >= numAssetsToLoad) {
shipSpriteSheet.removeEventListener("load", assetLoaded, false);
pointImage.removeEventListener("load", assetLoaded, false);
thrustAudioElement.removeEventListener("canplaythrough", assetLoaded, false);
explosionAudioElement.removeEventListener("canplaythrough", assetLoaded, false);
victoryAudioElement.removeEventListener("canplaythrough", assetLoaded, false);
musicTrackElement.removeEventListener("canplaythrough", assetLoaded, false);
gameState = GAME_STATE_INIT;
}
}
If you take a look at the console output, you'll see that all of the sounds begin loading (particularly explode1.mp3) but don't necessarily finish and call assetLoaded...
UPDATE:
It seems to be the consensus is that I should not be using mp3 (incidentally, I'm already using mp3, AAC, AND ogg, but defaulting to mp3), and also that I should use the Web Audio API. These are both welcome pieces of input, and I will make the necessary changes. However, I still don't have an answer to the original question, which is, "Why does one particular sound not load reliably on desktop while the others load with no problem?" Anybody wanna take a crack at that one? Or is the answer going to be something like, "These things are highly unpredictable, and there's no way to fix it except by switching to a more dependable methodology, like Web Audio API"?
UDATE:
Here's an excerpt from my app.yaml file, which, I gather, helps GAE setup the server.
- url: /(.*\.(mp3|ogg|wav))
static_files: \1
upload: (.*\.(mp3|ogg|wav))
Some things to be aware of:
You shouldn't use MP3 for HTML5 games.
You will need to dual-encode all your sounds to both AAC (.m4a) and Ogg Vorbis (.ogg) to ensure they can be played everywhere, since there is no one format which can be played everywhere.
You must ensure your server has the correct MIME types for the audio files. Some browsers will happily play audio if the server says it has the wrong MIME type; others will fail silently. For AAC and Ogg Vorbis the types are audio/mp4 and audio/ogg respectively.
Most mobile devices can only play one sound at a time, and iOS generally doesn't let you play audio unless it's in a user-initiated input event (such as touchstart).
You'll probably want to use the Web Audio API where supported (Chrome and iOS 6+) since playback is more reliable and polyphonic even on iOS - but note iOS still mutes the Web Audio API until a user input event.
This is not a direct answer to your question why sound is not being played, but more like what you should do with your game sound effects.
For game sound effects I suggest you use HTML5 Web Audio API which gives more control over how sounds are played (pitch of the sound effect, less delay in playback, etc):
http://www.html5rocks.com/en/tutorials/webaudio/intro/
iOS 6+ supports Web Audio https://developer.apple.com/technologies/ios6/
Web audio is not supported in FF yet, but the support is coming