<audio> a <video> tagy poskytují mnohem více funkcí, než většina lidí ví. Věděli jste například, že pomocí několika triků s JavaScriptem můžete zjistit podporované video formáty a zvukové formáty? Přivedlo mě to k zamyšlení nad možnostmi detekce objemu systému pomocí JavaScriptu v prohlížeči.
Nesnáším být buzzkill, ale JavaScript bohužel neposkytuje přímý přístup do systému hlasitost, ale můžete pomocí <audio> a/nebo <video> prvky, programově nastavit a získat úroveň hlasitosti.
// Getting volume level
const volume = document.querySelector("video").volume; // 1
// Setting volume level
document.querySelector("video").volume = 0.5; // set volume to 50%
Můžete také poslouchat změny hlasitosti pomocí události "onvolumechange":
document.querySelector("video").addEventListener("onvolumechange", e => {
// Change your custom control UI
});
Dává to smysl, že nemůžete nastavit úroveň hlasitosti systému z náhodného úryvku JavaScriptu v prohlížeči, ale trochu jsem doufal, že tuto úroveň můžete získat. Nastavení hlasitosti pomocí JavaScriptu pro dané médium je relativní k úrovni hlasitosti systému, ale hej – alespoň pro tyto prvky můžeme vytvořit vlastní ovládací prvky pomocí .volume nastavení!