Can somebody help me on how to capture audio from default microphone using HTML5?
There are many samples available, but none of them seem to working.
I have tried Audio capturing with HTML5
As it only works with chrome with flags enabled. but it's getting NavigatorUserMediaError. The video icon on the address bar has a red cross sign and its tooltip says 'this page has been blocked from accessing your camera and microphone'
There's some great articles on HTML5 Rocks. This is just one that I pulled.
http://updates.html5rocks.com/2012/09/Live-Web-Audio-Input-Enabled
// success callback when requesting audio input stream
function successCallback(stream) {
var audioContext = new (window.webkitAudioContext)();
// Create an AudioNode from the stream.
var mediaStreamSource = audioContext.createMediaStreamSource( stream );
// Connect it to the destination to hear yourself (or any other node for processing!)
mediaStreamSource.connect( audioContext.destination );
}
function errorCallback() {
console.log("The following error occurred: " + err);
}
navigator.webkitGetUserMedia( {audio:true}, successCallback, errorCallback );
make sure you start the demo from a webserver - simply copy/paste & start from file system won't work - in chrome you never get access to the mic this way.
Recently (not sure when) Chrome added the requirement that the page be accessed over SSL to enable getUserMedia.
Related
[Goal]: To record the sound of a tab and at the same time hear the sound while it's being recorded
[Means]: To use chrome.tabCapture because it's less invasive than chrome.desktopCapture or navigator.mediaDevices.getDisplayMedia. The former provides a better user experience as opposed to the latter which asks for tab selection every time and then intrusively shows the blue rectangle with a status bar and the "Stop Sharing" button
[Issue]: Tab sound is muted after getting the stream (recording not necessary, only calling getUserMedia) and can not be unmuted. Is this a bug? How can it be avoided?
[Technicals]:
Obtain the stream id in a foreground page (popup, options, or iframe pointing to an extension page, injected in the current DOM by a content script) because that's the only place where tabCapture is available
const tabId = ...get current tab id...
chrome.tabCapture.getMediaStreamId({ consumerTabId: tabId }, function(streamId) {
// send the streamId to the content script
})
Receive the streamId then use it to start the capture
const options = {
audio: {
mandatory: {
chromeMediaSource: 'tab',
chromeMediaSourceId: streamId
}
}
}
navigator.mediaDevices.getUserMedia(options).then((tabStream) => {
// at this point the sound of the tab becomes muted with no way to unmute it
});
Just invoking tabCapture will mute the tab. AudioContext source connecting to the default destination doesn't do anything for this stream and no error is thrown. If the callback promise from getUserMedia is empty, the sound of the tab comes back on its own in about 20 seconds or so. If MediaRecorder actually uses the stream to record the sound, the sound doesn't come back until recording is stopped. The sound of the tab is present in the recording, just muted while recording.
[Comparison 1]: Obtaining a MediaStream directly with chrome.tabCapture.capture instead of the above mechanism works as intended. The tab sound is muted, but can be reconnected to the speakers using AudioContext. The issue with this approach is that chrome.tabCapture.capture can't be started successfully in an injected iframe (always fails with the cryptic "Error starting tab capture"), so there's no way to capture the sound. It does work in a popup though, but not really an option given its volatile nature.
[Comparison 2]: chrome.desktopCapture works in the opposite way. The sound is always present in the tab while recording and can not be muted, not that this poses a problem.
Using the standard gamePad code, not finding sound files even though the path name is correct?
I have definitely researched this question. For sure, I have found code on SO claiming to solve this dilemma, but this published code doesn't.
I am successfully finding the sound file using Preview under BBEdit's "Markup" Menu. But, the oh-oh surfaces when running my game on my commercial Server.
I am even successful when using keypress code is activated -- local on my Mac and on the Server.
The failure is when I am using the external Server to run my gamePad code to find the sound file when all my source code is loaded onto my Server. In this case, the sound does not play.
FILE HIERARCHY
games folder
Game_1 folder
game1.html
Game_Support folder
audio folder
js folder
HTML
<body onload="doBodyOnLoad()">
JS:
function doBodyOnLoad() {
$(document).ready(function() {
// ... //
}); // $(document).ready
} // doBodyOnload
function setupKeypresses() {
$(document).keydown(function(evt) {
let code = evt.keyCode || evt.which;
// for example:
if (code === "R")
{
movePaddleRight(); // this will call ouch() below
}
});
} // setupKeypresses
function PlaySound(id, src) {
let theSound = new Audio();
theSound.src = src;
theSound.play();
} // PlaySound
function ouch() {
updateScore(--thisScore);
// even the absolute path doesn't work ?
// var theSnd = "http://lovesongforever.com/games/Game_1/Game_1_Support/audio/explosion.mp3";
var theSnd = "Game_1_Support/audio/explosion.mp3";
PlaySound("audioPlaceHolder", theSnd);
// fade either the whole Board (okay), or just the Paddle (not! so much)
doFade("#gameBoard"); // doFade("#gameBoard > #gamePaddle") [not ready for Prime Time]
} // ouch
Thanks bunches for your patience with me!
This is because you're trying to autoplay an Audio element without user interaction to initiate the audio.
Firefox expresses a blocked play() call to JavaScript by rejecting the promise returned by HTMLMediaElement.play() with a NotAllowedError. All major browsers which block autoplay express a blocked play via this mechanism. In general, the advice for web authors when calling HTMLMediaElement.play(), is to not assume that calls to play() will always succeed, and to always handle the promise returned by play() being rejected.
https://hacks.mozilla.org/2019/02/firefox-66-to-block-automatically-playing-audible-video-and-audio/
I think it will work if you click or tap on the page first. Gamepad button presses may work for this too depending on the implementation.
I am building a web page with a list of video records. Clicking on each video record opens a modal dialog on the same page with detail of the record and an HTML5 Video player.
A user can open one video, close it, and open another as many times as they want. However, on Chome specifically, after 3-5 videos, the browser starts hanging for upwards of two minutes while displaying a message "waiting for socket".
Doing some reading, I have narrowed it to Chrome's inability to open more than 6 connections to the same host.
I must be doing something wrong with how I dispose of the Media players. I believe the socket remains open to the media for some period even though the html for the player has been removed from the dom.
Using:
Bootstrap,
MediaElement.js,
HTML5 Video,
MVC,
Controller returning "Range Request" of FilePathResult
// Handling Bootstrap Modal Window Close Event
// Trigger player destroy
$("#xr-interaction-detail-modal").on("hidden.bs.modal", function () {
var player = xr.ui.mediaelement.xrPlayer();
if (player) {
player.pause();
player.remove();
}
});
I am going to go for my Self Learner badge, here, and answer my own question.
I did about 8 hours of research on this and came up with a great solution. Three things had to be done.
Set the HTML5 video src to something other than the original URL. This will trigger the player to close the open socket connection.
Set the HTML5 video src to a Base64 encoded data object. This will prevent the Error Code 4 issue MEDIA_ERR_SRC_NOT_SUPPORTED.
For issues in older versions of Firefox, also trigger the .load() event.
My Code:
// Handling Bootstrap Modal Window Close Event
// Trigger player destroy
$("#xr-interaction-detail-modal").on("hidden.bs.modal", function () {
var player = xr.ui.mediaelement.xrPlayer();
if (player) {
player.pause();
("video,audio").attr("src","data:video/mp4;base64,AAAAHG...MTAw");
player.load();
player.remove();
}
});
I came up with the idea to load the data object as the src. However, I'd like to thank kud on GitHub for the super small base64 video.
https://github.com/kud/blank-video
Added a line between pause() and remove():
// Handling Bootstrap Modal Window Close Event
// Trigger player destroy
$("#xr-interaction-detail-modal").on("hidden.bs.modal", function () {
var player = xr.ui.mediaelement.xrPlayer();
if (player) {
player.pause();
("video,audio").attr("src", "");
player.remove();
}
});
A notable issue that's appearing as I'm building a simple audio streaming element in HTML5 is that the <audio> tag doesn't behave as one would expect in regards to playing and pausing a live audio stream.
I'm using the most basic HTML5 code for streaming the audio, an <audio> tag with controls, the source of which is a live stream.
Current outcome: When the stream is first played, it plays whatever is streaming as expected. When it's paused and played again, however, the audio resumes exactly where it left off when the stream was previously paused. The user is now listening to a delayed version of the stream. This occurrence isn't browser-specific.
Desired outcome: When the stream is paused, I want the stream to stop. When it is played again, I want it resume where the stream is currently at, not where it was when the user paused the stream.
Does anyone know of a way to make this audio stream resume properly after it's been paused?
Some failed attempts I've made to fix this issue:
Altering the currentTime of the audio element does nothing to streaming audio.
I've removed the audio element from the DOM when the user stops stream playback and added it back in when user resumes playback. The stream still continues where the user left off and worse yet downloads another copy of the stream behind the scenes.
I've added a random GET variable to the end of the stream URL every time the stream is played in an attempt to fool the browser into believing that it's playing a new stream. Playback still resumes where the user paused the stream.
Best way to stop a stream, and then start it again seems to be removing the source and then calling load:
var sourceElement = document.querySelector("source");
var originalSourceUrl = sourceElement.getAttribute("src");
var audioElement = document.querySelector("audio");
function pause() {
sourceElement.setAttribute("src", "");
audioElement.pause();
// settimeout, otherwise pause event is not raised normally
setTimeout(function () {
audioElement.load(); // This stops the stream from downloading
});
}
function play() {
if (!sourceElement.getAttribute("src")) {
sourceElement.setAttribute("src", originalSourceUrl);
audioElement.load(); // This restarts the stream download
}
audioElement.play();
}
Resetting the audio source and calling the load() method seems to be the simplest solution when you want to stop downloading from the stream.
Since it's a stream, the browser will stop downloading only when the user gets offline. Resetting is necessary to protect your users from burning through their cellular data or to avoid serving outdated content that the browser downloaded when they paused the audio.
Keep in mind though that when the source attribute is set to an empty string, like so audio.src = "", the audio source will instead be set to the page's hostname. If you use a random word, that word will be appended as a path.
So as seen below, setting audio.src ="", means that audio.src === "https://stacksnippets.net/js". Setting audio.src="meow" will make the source be audio.src === "https://stacksnippets.net/js/meow" instead. Thus the 3d paragraph is not visible.
const audio1 = document.getElementById('audio1');
const audio2 = document.getElementById('audio2');
document.getElementById('p1').innerHTML = `First audio source: ${audio1.src}`;
document.getElementById('p2').innerHTML = `Second audio source: ${audio2.src}`;
if (audio1.src === "") {
document.getElementById('p3').innerHTML = "You can see me because the audio source is set to an empty string";
}
<audio id="audio1" src=""></audio>
<audio id="audio2" src="meow"></audio>
<p id="p1"></p>
<p id="p2"></p>
<p id="p3"></p>
Be aware of that behavior if you do rely on the audio's source at a given moment. Using the about URI scheme seems to trick it into behaving in a more reliable way. So using "about:" or "about:about", "about:blank", etc. will work fine.
const resetAudioSource = "about:"
const audio = document.getElementById('audio');
audio.src = resetAudioSource;
document.getElementById('p1').innerHTML = `Audio source: -- "${audio.src}"`;
// Somewhere else in your code...
if (audio.src === resetAudioSource){
document.getElementById('p2').innerHTML = "You can see me because you reset the audio source."
}
<audio id="audio"></audio>
<p id="p1"></p>
<p id="p2"></p>
Resetting the audio.src and calling the .load() method will make the audio to try to load the new source. The above comes in handy if you want to show a spinner component while the audio is loading, but don't want to also show that component when you reset your audio source.
A working example can be found here: https://jsfiddle.net/v2xuczrq/
If the source is reset using a random word, then you might end up with the loader showing up when you also pause the audio, or until the onError event handler catches it. https://jsfiddle.net/jcwvue0s/
UPDATE: The strings "javascript:;" and "javascript:void(0)" can be used instead of the "about:" URI and this seems to work even better as it will also stop the console warnings caused by "about:".
Note: I'm leaving this answer for the sake of posterity, since it was the best solution I or anyone could come up with at the time for my issue. But I've since marked Ciantic's later idea as the best solution because it actually stops the stream downloading and playback like I originally wanted. Consider that solution instead of this one.
One solution I came up with while troubleshooting this issue was to ignore the play and pause functions on the audio element entirely and just set the volume property of the audio element to 0 when user wishes to stop playback and then set the volume property back to 1 when the user wishes to resume playback.
The JavaScript code for such a function would look much like this if you're using jQuery (also demonstrated in this fiddle):
/*
* Play/Stop Live Audio Streams
* "audioElement" should be a jQuery object
*/
function streamPlayStop(audioElement) {
if (audioElement[0].paused) {
audioElement[0].play();
} else if (!audioElement[0].volume) {
audioElement[0].volume = 1;
} else {
audioElement[0].volume = 0;
}
}
I should caution that even though this achieves the desired functionality for stopping and resuming live audio streams, it isn't ideal because the stream, when stopped, is actually still playing and being downloaded in the background, using up bandwidth in the process.
However, this solution doesn't necessarily take up more bandwidth than just using .play() and .pause() on a streaming audio element. Simply using the audio tag with streaming audio uses up a great deal of bandwidth anyway, because once streaming audio is played, it continues to download the contents of the stream in the background when it is paused.
It should be noted that this method won't work in iOS because of purposefully built-in limitations for iPhones and iPads:
On iOS devices, the audio level is always under the user’s physical control. The volume property is not settable in JavaScript. Reading the volume property always returns 1.
If you choose to use the workaround in this answer, you'll need to create a fallback for iOS devices that uses the play() and pause() functions normally, or your interface will be unable to pause the stream.
Tested #Ciantics code and it worked with some modifications, if you want to use multiple sources.
As the source is getting removed, the HTML audio player becomes inactive, so the source (URL) needs to be added directly after again to become active.
Also added an event listener at the end to connect the function when pausing:
var audioElement = document.querySelector("audio");
var sources = document.querySelector("audio").children;
var sourceList = [];
for(i=0;i<sources.length;i++){
sourceList[i] = sources[i].getAttribute("src");
}
function pause() {
for(i=0;i<sources.length;i++){
sources[i].setAttribute("src", "");
}
audioElement.pause();
// settimeout, otherwise pause event is not raised normally
setTimeout(function () {
audioElement.load(); // This stops the stream from downloading
});
for(i=0;i<sources.length;i++){
if (!sources[i].getAttribute("src")) {
sources[i].setAttribute("src", sourceList[i]);
audioElement.load(); // This restarts the stream download
}
}
}
audioElement.addEventListener("pause", pause);
I am using web audio api in my project. Is there a way to record the audio data that's being sent to webkitAudioContext.destination?
.wav files are playing in my browser, so there should be some way to store that data into a (.wav) file . i know this is possible, but not yet find any solution :(
recorder.js can help me, but upto now i found it is only recording the microphone live input, is it possible to record my audio(.wav files) with the help of recorder.js? plz help
i am using this sample for recording https://github.com/mattdiamond/Recorderjs
I have managed to achieve this through a pure WebAudio solution (no Recorderjs needed). You can see it working fully on my discJS project and use the relevant source file to see how my complete code is working. I imagine this is only relevant to recording WebAudio nodes that you are playing yourself programmatically.
First you will need an HTML <audio> to use as a final destination. In this case I choose to show the controls so that the user may easily download the resulting file.
<audio id='recording' controls='true'></audio>
Now for the Javascript mojo:
const CONTEXT = new AudioContext();
var recorder=false;
var recordingstream=false;
function startrecording(){
recordingstream=CONTEXT.createMediaStreamDestination();
recorder=new MediaRecorder(recordingstream.stream);
recorder.start();
}
function stoprecording(){
recorder.addEventListener('dataavailable',function(e){
document.querySelector('#recording').src=URL.createObjectURL(e.data);
recorder=false;
recordingstream=false;
});
recorder.stop();
}
Now the final glue is that whenever you play an audio source, you also need to connect it to your recording stream:
function play(source){
let a=new Audio(source);
let mediasource=CONTEXT.createMediaElementSource(a);
mediasource.connect(CONTEXT.destination);//plays to default context (speakers)
mediasource.connect(recordingstream);//connects also to MediaRecorder
a.play();
}
This is a relatively primitive setup that works fine (tested on Firefox 52 and Chrome 70). For a more proper implementation, see MediaRecorder on MDN.
As found on the github: var rec = new Recorder(source [, config]), where source is an audio node. So it's up to you to put in the right node. If you play .wav files using <audio>, you can send it to the recorder:
<audio id="audio" src="" controls></audio>
var a = document.getElementById('audio');
var context = new webkitAudioContext();
var sourceNode = context.createMediaElementSource(a);
var rec = new Recorder(sourceNode);