Audio with blob as source not playing when called from a function
up vote
0
down vote
favorite
I'm using a navigator.mediaDevices.getUserMedia({ audio: true }) to get the user microphone. This is my code:
navigator.mediaDevices.getUserMedia({ audio: true })
.then(stream => {
mediaRecorder = new MediaRecorder(stream);
mediaRecorder.start();
mediaRecorder.addEventListener("dataavailable", event => {
audioChunks.push(event.data);
});
mediaRecorder.addEventListener("stop", () => {
blob = new Blob(audioChunks);
audioUrl = URL.createObjectURL(blob);
});
});
Then when the user clicks the stop button, it does this:
mediaRecorder.stop();
addSound(audioUrl);
Then addSound function creates an object with the audio and some other info and puts it into an array. Then, I have a loop that works as a sequencer, this is the code:
function loop(){
secondTimer += (1/40);
for(var i = 0; i < audios.length; i++){
var audio = audios[i];
var start = audio.start;
if(!audio.played && secondTimer >= start){
audio.audio.play();
audio.played = true;
}
}
if(play == true){
setTimeout(loop, 25);
}
}
Basically it checks if the current time from the sequencer is greater or equal than the start time from the audio. If it is, then it plays the audio and set its "played" property to true so it can't be played twice.
The problem is, the audio I recorded with the mic is not playing. However, if I create the audio object using an mp3 file for example, it works.
Another thing to note is that if I do audio.play() on the addSound function it works. Also, when I go to chrome dev tools and try to do audios[x].audio.play() it also works. So it's only not working when it's called from the loop function, which is weird.
This is the source from the audio element shown when console logging it:
blob:http://localhost/4a7bb4a3-1940-496c-a545-a956d1ccbd57
If its any help.
Thanks in advance!
javascript audio
asked Nov 22 at 3:01
nick
701522
|
show 9 more comments
up vote
0
down vote
favorite
I'm using a navigator.mediaDevices.getUserMedia({ audio: true }) to get the user microphone. This is my code:
navigator.mediaDevices.getUserMedia({ audio: true })
.then(stream => {
mediaRecorder = new MediaRecorder(stream);
mediaRecorder.start();
mediaRecorder.addEventListener("dataavailable", event => {
audioChunks.push(event.data);
});
mediaRecorder.addEventListener("stop", () => {
blob = new Blob(audioChunks);
audioUrl = URL.createObjectURL(blob);
});
});
Then when the user clicks the stop button, it does this:
mediaRecorder.stop();
addSound(audioUrl);
Then addSound function creates an object with the audio and some other info and puts it into an array. Then, I have a loop that works as a sequencer, this is the code:
function loop(){
secondTimer += (1/40);
for(var i = 0; i < audios.length; i++){
var audio = audios[i];
var start = audio.start;
if(!audio.played && secondTimer >= start){
audio.audio.play();
audio.played = true;
}
}
if(play == true){
setTimeout(loop, 25);
}
}
Basically it checks if the current time from the sequencer is greater or equal than the start time from the audio. If it is, then it plays the audio and set its "played" property to true so it can't be played twice.
The problem is, the audio I recorded with the mic is not playing. However, if I create the audio object using an mp3 file for example, it works.
Another thing to note is that if I do audio.play() on the addSound function it works. Also, when I go to chrome dev tools and try to do audios[x].audio.play() it also works. So it's only not working when it's called from the loop function, which is weird.
This is the source from the audio element shown when console logging it:
blob:http://localhost/4a7bb4a3-1940-496c-a545-a956d1ccbd57
If its any help.
Thanks in advance!
javascript audio
asked Nov 22 at 3:01
nick
701522
You're probably hitting a very common bug, where the browser doesn't create valid media with the MediaRecorder when outputting chunks.
– Brad
Nov 22 at 3:03
Is there any workaround? I'm trying to avoid using the server to keep it all client side...
– nick
Nov 22 at 3:07
You could let the MediaRecorder buffer your data, and get one chunk when it's stopped. Alternatively, try a different format. I think this is fixed for WebM in Chrome, but I'm not sure. Last time I dealt with this, I re-muxed the media in-browser with some code I wrote. I'm sorry, I don't have access to that code anymore.
– Brad
Nov 22 at 3:10
Ok, I tried console logging the audio and I saw that when I hit play it outputsPromise -> pendingon the recorded one andPromise -> resolvedon the other ones. Once it's resolved it works in the sequencer. Any ideas why it takes so much to resolve?
– nick
Nov 22 at 3:19
What does youraddSoundfunction do? It sounds like you're trying to play the recorded file before it's actually done being recorded, which doesn't work with all formats.
– Brad
Nov 22 at 3:22
|
show 9 more comments
up vote
0
down vote
favorite
up vote
0
down vote
favorite
I'm using a navigator.mediaDevices.getUserMedia({ audio: true }) to get the user microphone. This is my code:
navigator.mediaDevices.getUserMedia({ audio: true })
.then(stream => {
mediaRecorder = new MediaRecorder(stream);
mediaRecorder.start();
mediaRecorder.addEventListener("dataavailable", event => {
audioChunks.push(event.data);
});
mediaRecorder.addEventListener("stop", () => {
blob = new Blob(audioChunks);
audioUrl = URL.createObjectURL(blob);
});
});
Then when the user clicks the stop button, it does this:
mediaRecorder.stop();
addSound(audioUrl);
Then addSound function creates an object with the audio and some other info and puts it into an array. Then, I have a loop that works as a sequencer, this is the code:
function loop(){
secondTimer += (1/40);
for(var i = 0; i < audios.length; i++){
var audio = audios[i];
var start = audio.start;
if(!audio.played && secondTimer >= start){
audio.audio.play();
audio.played = true;
}
}
if(play == true){
setTimeout(loop, 25);
}
}
Basically it checks if the current time from the sequencer is greater or equal than the start time from the audio. If it is, then it plays the audio and set its "played" property to true so it can't be played twice.
The problem is, the audio I recorded with the mic is not playing. However, if I create the audio object using an mp3 file for example, it works.
Another thing to note is that if I do audio.play() on the addSound function it works. Also, when I go to chrome dev tools and try to do audios[x].audio.play() it also works. So it's only not working when it's called from the loop function, which is weird.
This is the source from the audio element shown when console logging it:
blob:http://localhost/4a7bb4a3-1940-496c-a545-a956d1ccbd57
If its any help.
Thanks in advance!
javascript audio
asked Nov 22 at 3:01
nick
701522
I'm using a navigator.mediaDevices.getUserMedia({ audio: true }) to get the user microphone. This is my code:
navigator.mediaDevices.getUserMedia({ audio: true })
.then(stream => {
mediaRecorder = new MediaRecorder(stream);
mediaRecorder.start();
mediaRecorder.addEventListener("dataavailable", event => {
audioChunks.push(event.data);
});
mediaRecorder.addEventListener("stop", () => {
blob = new Blob(audioChunks);
audioUrl = URL.createObjectURL(blob);
});
});
Then when the user clicks the stop button, it does this:
mediaRecorder.stop();
addSound(audioUrl);
Then addSound function creates an object with the audio and some other info and puts it into an array. Then, I have a loop that works as a sequencer, this is the code:
function loop(){
secondTimer += (1/40);
for(var i = 0; i < audios.length; i++){
var audio = audios[i];
var start = audio.start;
if(!audio.played && secondTimer >= start){
audio.audio.play();
audio.played = true;
}
}
if(play == true){
setTimeout(loop, 25);
}
}
Basically it checks if the current time from the sequencer is greater or equal than the start time from the audio. If it is, then it plays the audio and set its "played" property to true so it can't be played twice.
The problem is, the audio I recorded with the mic is not playing. However, if I create the audio object using an mp3 file for example, it works.
Another thing to note is that if I do audio.play() on the addSound function it works. Also, when I go to chrome dev tools and try to do audios[x].audio.play() it also works. So it's only not working when it's called from the loop function, which is weird.
This is the source from the audio element shown when console logging it:
blob:http://localhost/4a7bb4a3-1940-496c-a545-a956d1ccbd57
If its any help.
Thanks in advance!
javascript audio
javascript audio
asked Nov 22 at 3:01
nick
701522
asked Nov 22 at 3:01
nick
701522
asked Nov 22 at 3:01
nick
701522
asked Nov 22 at 3:01
nick
701522
asked Nov 22 at 3:01
nick
701522
701522
You're probably hitting a very common bug, where the browser doesn't create valid media with the MediaRecorder when outputting chunks.
– Brad
Nov 22 at 3:03
Is there any workaround? I'm trying to avoid using the server to keep it all client side...
– nick
Nov 22 at 3:07
You could let the MediaRecorder buffer your data, and get one chunk when it's stopped. Alternatively, try a different format. I think this is fixed for WebM in Chrome, but I'm not sure. Last time I dealt with this, I re-muxed the media in-browser with some code I wrote. I'm sorry, I don't have access to that code anymore.
– Brad
Nov 22 at 3:10
Ok, I tried console logging the audio and I saw that when I hit play it outputsPromise -> pendingon the recorded one andPromise -> resolvedon the other ones. Once it's resolved it works in the sequencer. Any ideas why it takes so much to resolve?
– nick
Nov 22 at 3:19
What does youraddSoundfunction do? It sounds like you're trying to play the recorded file before it's actually done being recorded, which doesn't work with all formats.
– Brad
Nov 22 at 3:22
|
show 9 more comments
You're probably hitting a very common bug, where the browser doesn't create valid media with the MediaRecorder when outputting chunks.
– Brad
Nov 22 at 3:03
Is there any workaround? I'm trying to avoid using the server to keep it all client side...
– nick
Nov 22 at 3:07
You could let the MediaRecorder buffer your data, and get one chunk when it's stopped. Alternatively, try a different format. I think this is fixed for WebM in Chrome, but I'm not sure. Last time I dealt with this, I re-muxed the media in-browser with some code I wrote. I'm sorry, I don't have access to that code anymore.
– Brad
Nov 22 at 3:10
Ok, I tried console logging the audio and I saw that when I hit play it outputsPromise -> pendingon the recorded one andPromise -> resolvedon the other ones. Once it's resolved it works in the sequencer. Any ideas why it takes so much to resolve?
– nick
Nov 22 at 3:19
What does youraddSoundfunction do? It sounds like you're trying to play the recorded file before it's actually done being recorded, which doesn't work with all formats.
– Brad
Nov 22 at 3:22
You're probably hitting a very common bug, where the browser doesn't create valid media with the MediaRecorder when outputting chunks.
– Brad
Nov 22 at 3:03
You're probably hitting a very common bug, where the browser doesn't create valid media with the MediaRecorder when outputting chunks.
– Brad
Nov 22 at 3:03
Is there any workaround? I'm trying to avoid using the server to keep it all client side...
– nick
Nov 22 at 3:07
Is there any workaround? I'm trying to avoid using the server to keep it all client side...
– nick
Nov 22 at 3:07
You could let the MediaRecorder buffer your data, and get one chunk when it's stopped. Alternatively, try a different format. I think this is fixed for WebM in Chrome, but I'm not sure. Last time I dealt with this, I re-muxed the media in-browser with some code I wrote. I'm sorry, I don't have access to that code anymore.
– Brad
Nov 22 at 3:10
You could let the MediaRecorder buffer your data, and get one chunk when it's stopped. Alternatively, try a different format. I think this is fixed for WebM in Chrome, but I'm not sure. Last time I dealt with this, I re-muxed the media in-browser with some code I wrote. I'm sorry, I don't have access to that code anymore.
– Brad
Nov 22 at 3:10
Ok, I tried console logging the audio and I saw that when I hit play it outputs
Promise -> pending on the recorded one and Promise -> resolved on the other ones. Once it's resolved it works in the sequencer. Any ideas why it takes so much to resolve?– nick
Nov 22 at 3:19
Ok, I tried console logging the audio and I saw that when I hit play it outputs
Promise -> pending on the recorded one and Promise -> resolved on the other ones. Once it's resolved it works in the sequencer. Any ideas why it takes so much to resolve?– nick
Nov 22 at 3:19
What does your
addSound function do? It sounds like you're trying to play the recorded file before it's actually done being recorded, which doesn't work with all formats.– Brad
Nov 22 at 3:22
What does your
addSound function do? It sounds like you're trying to play the recorded file before it's actually done being recorded, which doesn't work with all formats.– Brad
Nov 22 at 3:22
|
show 9 more comments
active
oldest
votes
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53423268%2faudio-with-blob-as-source-not-playing-when-called-from-a-function%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
active
oldest
votes
active
oldest
votes
active
oldest
votes
active
oldest
votes
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53423268%2faudio-with-blob-as-source-not-playing-when-called-from-a-function%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
You're probably hitting a very common bug, where the browser doesn't create valid media with the MediaRecorder when outputting chunks.
– Brad
Nov 22 at 3:03
Is there any workaround? I'm trying to avoid using the server to keep it all client side...
– nick
Nov 22 at 3:07
You could let the MediaRecorder buffer your data, and get one chunk when it's stopped. Alternatively, try a different format. I think this is fixed for WebM in Chrome, but I'm not sure. Last time I dealt with this, I re-muxed the media in-browser with some code I wrote. I'm sorry, I don't have access to that code anymore.
– Brad
Nov 22 at 3:10
Ok, I tried console logging the audio and I saw that when I hit play it outputs
Promise -> pendingon the recorded one andPromise -> resolvedon the other ones. Once it's resolved it works in the sequencer. Any ideas why it takes so much to resolve?– nick
Nov 22 at 3:19
What does your
addSoundfunction do? It sounds like you're trying to play the recorded file before it's actually done being recorded, which doesn't work with all formats.– Brad
Nov 22 at 3:22