We Keep Coding

Fail to read audio from blob url in mobile Chrome

I want to use mp3 playing in my mobile web app, so I wrote a test app, I used this solution but blob URL seems to be broken and empty while file is rightly readed.
<input type="file" accept=".mp3" onchange="autoplay()">
<script>
var file, url, audio, source;
function autoplay(){
window.URL = window.URL || window.webkitURL;
file = document.querySelector("input[type=file]").files[0];
url = decodeURIComponent(window.URL.createObjectURL(file));
audio = document.createElement("audio");
source = document.createElement("source");
source.src = url;
audio.appendChild(source);
document.body.appendChild(audio);
audio.play();
}
</script>
Blob size is wrong, I've put bigger file
EDIT:
I used older version with FileReader, maybe this is not good choice but it works...

Don't use decodeURIComponent just do URL.createObjectURL
window.URL = window.URL || window.webkitURL;
function autoplay(evt) {
var file = document.querySelector("input[type=file]").files[0];
var url = URL.createObjectURL(file);
var audio = new Audio();
audio.src = url;
audio.play().catch(function(err){
console.error(err) // could not play audio
});
audio.controls = true;
document.body.appendChild(audio);
}
document.querySelector("input[type=file]").onchange = autoplay
<input type="file" accept=".mp3">
btw, I get problem playing it directly, it's weird since the event.isTrusted is true, that's why i appended the audio to the DOM

How to switch between 2 audio tracks but 1 video file?

I am a total JavaScript amateur. I want to create a section where people can switch between 2 audios with a video running along with it. I want to show a before and after version of the audio.
Basically, the video should run with the "before" version of the audio initially. Then there should be a button to switch the audio to the "after" version, and go back and forth.
I tried the "audioTracks" method, but the browser compatibility is not good with it. What is the best possible way to achieve it?
Thanks in advance.

You just use two HTML Audio elements and then sync their times:
var audio1 = new Audio()
var audio2 = new Audio()
audio1.src = 'pathToSource',
audio2.src = 'pathToSource2',
var video = document.getElementByID('myvideo');
video.muted = true; //mute video cuz we have audio already
function switchAudio(one, two, vid) {
if(one.paused) {
two.pause();
one.currentTime = vid.currentTime;
one.play
} else {
one.pause();
two.currentTime = vid.currentTime;
two.play()
}
}

That did it :) I made some changes though. The audio seems to be working great. I could play and switch it. But the video was not starting up with the button. So I changed the code to this:
function switchAudio(one, two, vid) {
if (one.paused) {
two.pause();
vid.play();
one.play();
one.currentTime = vid.currentTime;
} else {
vid.pause();
one.pause();
vid.play();
two.play();
two.currentTime = vid.currentTime;
}
}
After this the video is playing along with the audio. But when I switch the audio, their timing does not match. The audio seems to be playing just a little bit late.

JavaScript - audio src - replace URL with variable

I've looked up similar questions, but haven't been able to make this work. Sorry if this is a basic question.
This works for me with an on-click button:
var player = document.createElement('audio');
player.src = 'http://jplayer.org/audio/ogg/Miaow-07-Bubble.ogg';
player.load();
player.play();
How can I replace the URL with a variable - "sound1", where the variable fetches a different URL? I tried this for the 2nd line, to no avail:
player.src = "'" + sound1 +"'";
Thanks.

You don't need " or '. Just use
player.src = sound1;
Assuming that sound1 just holds an URL.
For example:
var sound1 = 'http://jplayer.org/audio/ogg/Miaow-07-Bubble.ogg';
var player = document.createElement('audio');
player.src = sound1;
player.load();
player.play();

Playing base64 audio file doesn't work on newest version of Chrome (46.0.2490.86 m)

I have a problem with playing base64 audio file on newest Chrome 46.0.2490.86 m
This audio file can play only 1 times. It doesn't play on second times.
We need to refresh browser to relay again.
This file played well on previous version of Chrome (can replay many times without refreshing browser).
This is my code:
window.playAudio1 = function () {
var audio = document.getElementById("audio");
audio.src = "<base64 mp3 audio>";
audio.play();
}
window.playAudio2 = function () {
var audio = document.getElementById("audio");
audio.src = "<base64 mp3 audio>";
audio.play();
}
JSFiddle

I encountered the same problem recently.
The only way i could get it to work was to include some random information in the base64 info.
e.g.
function beep()
{
try
{
var snd = new Audio("data:audio/wav;rnd=" + getRandom(1,100000) + ";base64,<<raw base64 data>>");
snd.load();
snd.currentTime = 0;
snd.play();
}
catch(e)
{
alert(e);
}
}
function getRandom(min, max) {
return Math.random() * (max - min) + min;
}
I also tried adding in the .load() and the .currentTime = 0, but to be honest, i don't think they are required for the fix, didn't try without though.
Enjoy!

Preload MP3 File before using the Play button

I have the following code:
function playSound(source) {
document.getElementById("sound_span").innerHTML =
"<embed src='" + source + "' hidden=true autostart=true loop=false>";
}
<span id="sound_span"></span>
<button onclick="playSound('file.mp3');"></button>
Once you click play, the MP3 gets downloaded, than it starts to play. However, it can take a while if it has like 1 MB. What I need is a preloaded (just like you can do with the images). So when the page loads, the mp3 will be streamed and if, for instance, 10 seconds later, the user pressed the 'play' button, he won't have to wait until the mp3 gets downloaded first, as it is already streamed.
Any ideas? Thanks in advance for any tip!

You can preload using <audio /> for newer browsers. Set autoplay = false. For older browsers that don't support <audio />, you can use <bgsound />. To preload a sound, set the volume to -10000.
function preloadSound(src) {
var sound = document.createElement("audio");
if ("src" in sound) {
sound.autoPlay = false;
}
else {
sound = document.createElement("bgsound");
sound.volume = -10000;
}
sound.src = src;
document.body.appendChild(sound);
return sound;
}
That will get the sound in your browser's cache. Then to play it, you can keep doing what you are doing with <embed />. Or if you want to take advantage of HTML5 features, you can call .play() on the returned <audio /> element. You could even add a play method to the <bgsound />:
function loadSound (src) {
var sound = document.createElement("audio");
if ("src" in sound) {
sound.autoPlay = false;
}
else {
sound = document.createElement("bgsound");
sound.volume = -10000;
sound.play = function () {
this.src = src;
this.volume = 0;
}
}
sound.src = src;
document.body.appendChild(sound);
return sound;
}
Then use it like this:
var sound = loadSound("/mySound.ogg"); // preload
sound.play();
The only caveat is FireFox doesn't support mp3. You'll have to convert your files to ogg.
Working demo: http://jsfiddle.net/PMj89/1/

You can use the HTML5 <audio> element's preload attribute, and fall back on <embed>.