Is there a way to programmatic-ally control audio level on tabs i want to regardless of how web app was designed (be it HTML5 Audio element or Flash, etc.)?
Just to make it clear i don't intend to research web page for some "id" "elements" or whatsoever, but something like Chrome.ThisAudioOutputLevels...?
Admitting that the audio comes from a <audio> HTML element, you can try to get all audio elements from the DOM and lower their volumes. I was suffering from this with google hangouts meetings where I couldn't lower the audio because it had no control whatsoever.
"The solution"
I selected all <audio> elements and lowered their volumes. Follow these steps:
Open your console on the given tab. (Press F12).
Select all audio elements.
Lower each audio volume.
let audios = [...document.getElementsByTagName('audio')];
audios.forEach(audio => audio.volume = 0.5) // lower volume 50%.
Volume range = {0..1} where 0 = no volume.
This is more of a comment than an answer, but I can't comment, so:
Browsers generally try not to change how the content is meant to be displayed, including sound. For this reason, I would be surprised if there were such a feature.
If you're trying to simply mute tabs, you could take a look at chrome://flags/#enable-tab-audio-muting
Alternatively you could use tampermonkey or a similar extension and run a search for all audio/video tags and change the volume, but you said you didn't want to search for specific elements. To my knowledge (and Google's) as of right now there is no volume control for an entire page.
Related
Question: how to prevent YouTube video name from showing up when changing volume in Windows 10. [YouTube IFrame Api]
What I don't want:
Image of what I don't want
I don't want the name of the YT video to show up when changing volume. It's really annoying and I can't find any way to disable it.
Is there some kind of playervar that stops this?
Thanks!
It appears that you currently cannot change Chrome flags to disable this from code. The best you can do is provide a direct link to the setting, as the flags page supports direct links to specific settings: chrome://flags/#hardware-media-key-handling
In the meantime, we'll just have to wait and make feature requests to Google. Maybe they can add a popup that says, "This website is trying to change a setting...", or something.
It is a browser feature, If you are using chrome you can disable this feature by navigating to chrome://flags/#hardware-media-key-handling and then disable Hardware Media Key Handling
With the release of OSX High-Sierra*, one of the new features in Safari is that videos on websites will not auto play anymore and scripts can't start it either, just like on iOS. As a user, I like the feature, but as a developer it puts a problem before me: I have an in-browser HTML5 game that contains video. The videos do not get automatically played anymore unless the user changes their settings. This messes up the game flow.
My question is, can I somehow use the players' interaction with the game as a trigger for the video to start playing automatically, even if said activity is not directly linked to the video element?
I cannot use jQuery or other frameworks, because of a restraint that my employer has put on our development. The one exception is pixi.js which - among all other animations - we are also using to play our videos inside a pixi container.
*The same restriction also applies on Mobile Chrome.
Yes, you can bind on event that are not directly ones triggered on the video element:
btn.onclick = e => vid.play();
<button id="btn">play</button><br>
<video id="vid" src="https://dl.dropboxusercontent.com/s/bch2j17v6ny4ako/movie720p.mp4"></video>
So you can replace this button with any other splash screen requesting an user click, and you'll be granted access to play the video.
But to keep this ability, you must call at least once the video's play method inside the event handler itself.
Not working:
btn.onclick = e => {
// won't work, we're not in the event handler anymore
setTimeout(()=> vid.play().catch(console.error), 5000);
}
<button id="btn">play</button><br>
<video id="vid" src="https://dl.dropboxusercontent.com/s/bch2j17v6ny4ako/movie720p.mp4"></video>
Proper fix:
btn.onclick = e => {
vid.play().then(()=>vid.pause()); // grants full access to the video
setTimeout(()=> vid.play().catch(console.error), 5000);
}
<button id="btn">play</button><br>
<video id="vid" src="https://dl.dropboxusercontent.com/s/bch2j17v6ny4ako/movie720p.mp4"></video>
Ps: here is the list of trusted events as defined by the specs, I'm not sure if Safari limits itself to these, nor if it includes all of these.
Important note regarding Chrome and preparing multiple MediaElements
Chrome has a long-standing bug caused by the maximum simultaneous requests per host which does affect MediaElement playing in the page, limiting their number to 6.
This means that you can not use the method above to prepare more than 6 different MediaElements in your page.
At least two workarounds exist though:
It seems that once a MediaElement has been marked as user-approved, it will keep this state, even though you change its src. So you could prepare a maximum of MediaElements and then change their src when needed.
The Web Audio API, while also concerned by this user-gesture requirement can play any number of audio sources once allowed. So, thanks to the decodeAudioData() method, one could load all their audio resources as AudioBuffers, and even audio resources from videos medias, which images stream could just be displayed in a muted <video> element in parallel of the AudioBuffer.
In my case i was combining transparent video (with audio) with GSAP animation. The solution from Kaiido works perfectly!
First, on user interaction, start and pause the video:
videoPlayer.play().then(() => videoPlayer.pause());
After that you can play it whenever you want. Like this:
const tl = gsap.timeline();
tl.from('.element', {scale: 0, duration: 5);
tl.add(() => videoPlayer.play());
Video will play after the scale animation :).
Tested in Chrome, Safari on iPhone
i wanted to ask a question regarding this chrome extension called Turn Off The Lights , im aware of how to dim the background using jquery and css etc.. but what i am interested in knowing is how to get the current video playing from popular websites like YouTube, dailymotion etc.. before applying the jquery effects..?
search with javascript to this "movie_player" id (YouTube only) and check if it's playing, if yes -> dim the web page.
More information about detecting the video player status, see this API link:
https://developers.google.com/youtube/js_api_reference#Playback_controls
I can only assume that it looks for or elements in the page using some selector.
Then it would add the div to dim the background using a content script, changing the z-index of the found video element to a higher value.
Background story: many users (including me) browse the web from notebooks that are not constructed for sound performance. That means (besides other things) that the sound volume for most videos is too low, especially if the video itself is recorded at low volume.
Therefore...
I was wondering if there is any way of increasing the volume of such a video (especially Youtube, but could be extended to other types), because I'm interested in doing it and even publishing it as Firefox/Chrome/other browser plug-in.
Or, alternatively, if you know such a plug-in do not hesitate to post the link here.
If you want to control system volume then JavaScript has no direct access to it, you would need to write NPAPI (C++ dll) plugin.
If you want to just adjust video player's own volume (you won't be able to increase it beyond 100%) then JavaScript can do it, perhaps.
If video player is HTML5 <video> tag then controlling volume is easy. For YouTube it would be:
document.getElementsByClassName("video-stream")[0].volume = 0.5; //50%
If it is a custom made flash player then you need to rely on its JavaScript interface, if any. Youtube player happens to support controlling volume with JavaScript:
document.getElementById("movie_player").setVolume(50);
In order for this to work you would need to break out of extension sandbox first by injecting <script> tag on the page with this code.
There is no universal solution, you would need to deal with each site individually.
Use VLC Media Player. You can copy and paste links into it. Increase sound to up to 250%
You can use js-ctypes to change system's volume level. Here is an example that sets volume to 12.5%:
Components.utils.import("resource://gre/modules/ctypes.jsm");
var lib = ctypes.open("winmm.dll");
var waveOutSetVolume = lib.declare("waveOutSetVolume", ctypes.default_abi,
ctypes.uint32_t,
ctypes.int32_t, ctypes.uint32_t);
waveOutSetVolume(-1, 0x20002000);
lib.close();
However, this only changes the volume for the Firefox process. It won't have any effect on Flash because it runs in a different process now. I'm not even sure whether winmm has some way to change the global volume at all, you might need the new MMDevice API for that - and then it gets complicated because doing COM calls via js-ctypes IMHO isn't possible. Only option is creating your own library to be distributed along with your extension. That should do the COM messaging and export a plain API that can be called via js-ctypes.
You can use Sound Booster software by Letasoft, but there are some things you might encounter like crash, we are using netbooks so the built-in sound card has limit. So try to buff first before playing that's the best advice that I can give. The max volume output will be 500%.
I found this
javascript:((v,a=new AudioContext(),g=a.createGain())=>(window._g??(c=>(a.createMediaElementSource(document.querySelector('video'))[c](g),g[c](a.destination),window._g=g))("connect")).gain.value=v??1)(parseFloat(prompt("Enter gain level",window._g?.gain.value)));
If you are using Chrome, then you can:
Right-click and choose Inspect. Or simply press F12.
Go to Console.
Paste this code.
Press Enter.
A message will appear, type what level you want (0.5 - 1 - 2 - 3 - ...), and press Enter.
For more about AudioContext.createGain(): Go Here
How would I go about seeking or pausing an embedded video (not necessarily a swf) from javascript? I am looking for something like Google's SWFObject's API, but for Windows Media Player, Real Player, Quicktime.
I would check out camen design, that is for backup (in case HTML 5 is not available), then broken links (set the src attribute of the video tag to something else, ironic enough that link to the video is broken), you can easily play/ pause, access volume control, etc using Javascript.
Like ItzWarty said, not many video formats are supported, but you can certainly work it out.