I want to find out where in a webpage's source code does a sound effect play. That'd allow me to better understand the code and obtain the audio file as well. I searched in the "Sources" and "Network" tabs of the Chrome Inspector, but there are no audio files there. The sound is probably fetched by an AJAX request or generated using the HTML5 Web Audio API. How do I set a breakpoint in the Chrome Debugger to pause when a sound plays?
As suggested in Abarnett's comment:
Use a browser add-on/extension/plug-in such as Chrome Audio Capture to record internal sounds in the browser.
Related
looking for assistance from anyone who might have some insight into this. having a problem with the MediaRecorder API built into Chrome, specifically on macOS, a problem that does not appear at all on windows
i am needing to capture the desktop screen as well as the desktop audio, and currently i get the stream using:
navigator.mediaDevices.getDisplayMedia({
video: {
cursor: 'always',
width: 1280,
height: 720,
frameRate: {
ideal: 12,
max: 15
},
},
audio: true
})
this of course gives the prompt for the user to select a screen/application/tab
following that, i load that into a new MediaRecorder:
new MediaRecorder(screenCaptureStream, {mimeType: "video/webm"})
on windows this all works fine. as long as the "Share Audio" checkbox on the bottom left is marked, audio will be heard in the ending file.
on mac however, the only time a "Share Audio" option is allowed is when a chrome tab is selected. this is fine for something like a youtube tab playing music, it captures both video and audio without a problem.
however, on a tab running an opentok video session, no audio coming from the video session is captured. at first i thought it may have been ffmpeg incorrectly processing it, but simply playing back the raw webm file gives no audio. checking with mediaInfo the file does indeed come back with an audio stream at "48.0kHz, 32bits, 1 channel, Opus"
because this isnt a problem on windows, i imagine that the Opentok video session is somehow outputting in such a way that it it bypassing the chrome tab altogether, so that even is the user can hear the audio, the recorder doesnt capture it.
does anyone know how to allow chrome to record audio on the Application/Screen choices on macOS?
EDIT: upon more experimentation, ive discovered that the issue lies in tokbox streams themselves.
setup: using a second pc, i hooked up my phone to a line-in port to use as the "mic" for the tokbox stream, and started up the session again. on that same page i have a youtube embedded iframe link to a random video, and on firefox, another video entirely.
selecting entire screen and making sure "Share Audio" is selected, i check that i can hear the audio being played from the phone on the other pc and its fine. the recording is going, and the checks for if there is an audio track pass. i swap to the next audio source by muting the 'phone' stream, and start playing the youtube embed. after a little bit, i stop it, and play the firefox video.
the results are that the embed and firefox audio got captured, but NONE of the tokbox audio got captured. (this was done on windows, so now i know its not a mac issue)
where is it being outputted?
For some reason, my Yahoo email tab sporadically plays audio from the beginning of an ad. The audio is definitely coming from this tab because it shows the small audio icon while it plays. I'm looking for some help using Chrome's Developer Tools. When I hear the audio clip, I have the Developer Tools open and I reference the [Network] tab, but I don't see any audio files referenced. I think it might be part of JavaScript. I'm looking for some guidance on how to isolate the source of the audio. Yahoo support was zero help.
Credit to #wOxxOm:
In DevTools, Sources, Event Listener Breakpoints, set breakpoints on all Media then wait till the sound is played or trigger it if you can. Then you should get some minified JS code, which you can pretty-print for easier reading, although the code is still minified and thus obfuscated so you have to kind of guess what it's doing. In my case, the code stopped on an ended event, but not on play. Still, I was able to find the code that actually played the sound - it went something like:
(h = e.play()) ? h.then(()=>{
a.Pa.info`Playing ${e.src}`;
a.ta = !0
}
and hovering over src (I could also have inspected e in that context to find src) showed me the URI for an mp3 that was the sound I was looking for! Breakpoints set on WebAudio did not work in this case - maybe it depends on the type of audio media being played? But I found the mp3 I was looking for! (Not saying what it was, but it was a very short clip - about 2 seconds - and as I understand it, samples below a certain length are not copyrightable, although I'm not 100% sure about that, so beware - as it is, I intend to use it for a personal, non-commercial project.
Follow these Steps to get the URL of the audio
Open the web page
Inspect the web page
Go to the Sources tab
Expand the Event Listener Breakpoints dropdown
Expand the Media dropdown
Mark the playing checkbox
How does chrome know which tabs are playing some sound? Alternatively, how does chrome know which tabs to put the speaker sign on?
This article may be useful:
From ghacks.net:
"Google Chrome uses an internal version of Adobe Flash which Google can use to determine when Flash is being used for audio playback.
Mozilla does not have that luxury. While it is working on a patch to display indicators when HTML5 is being used for audio playback, it cannot do anything about plug-in contents on its own."
Assuming that's correct, then from there it's not hard to imagine that if they know of every single instance of flash being used for audio playback, that they probably have an associated property indicating which tab it is on.
I'm trying to get into the Web Audio API as I'm looking to make some visualizations based on the music that's playing. However all examples I have found, it's like the audio is muted. It plays the file but there's no sound.
For example: codepen.io/noeldelgado/pen/jqibm
Even following this - https://www.youtube.com/watch?v=IBHpSkGZtNM yields same result.
I'm on mac, using the latest version of Chrome (42.0.2311.90), have also tried on latest Firefox and it's the same problem.
It's a cross-origin access issue in createMediaElementSource that landed in Chrome 42. You need to setup the appropriate headers for the ogg files and set the crossOrigin attribute. Otherwise you get no audio output at all.
NOT recording using webcam or microphone...
But record (and also save) the video that is currently streaming or playing in the browser.
This works for not-live videos from youtube and the like: Use browser developer tools. For example firefox web developer tools network tab open go to the page and look for the get respond that has return type of video/* (video/mp4 in youtube) right click on it and select open in new tab and then just use browser's save (CTRL-S) to save the video. I believe this to work similiarly in chrome.
Use developer tools of your browser to see all network traffic and save the video stream.