Reageren op de pagina focus
Moderne browsers werken allemaal met tabbladen. In elke tab kun je een website open hebben staan, maar dat kan wat zij-effecten hebben. Van al die tabbladen kun je er maar één tegelijk zien. Dat tabblad heeft de focus.
Stel dat al die sites multimedia-bestanden ophalen en die meteen beginnen af te spelen. Dat wordt een enorme kakofonie van geluiden. Het zou mooi zijn als al die sites zouden stoppen met downloaden (dan wel het geluid uitzetten) als hun tabblad de focus verliest.
Op deze pagina wordt uitgelegd hoe je zoiets aanpakt. We beginnen met een voorbeeld:
Hieronder zie je een audiospeler. Als je die start hoor je muziek van de Edwin Hawkin Singers: Oh Happy Day.
Zodra je een nieuwe tab opent of naar een ander tabblad gaat stopt de muziek. Als je weer terug komt op dit tabblad gaat de
muziek verder waar die was gestopt.
clip: Oh Happy Day, duur 41 seconden,
0.24-7.02 MB, afhankelijk van het formaat.
- Er worden twee items besproken:
- De PageVisiblity-API.
- Gebruiken in je eigen site.
- De PageVisiblity-API
- De zichtbaarheid van een pagina in de browser wordt bijgehouden in het opject document.
- Om te kunnen kijken of een web-pagina zichtbaar is in de browser, beschikt het object document over een API (Application Programming Interface). Die kun je raadplegen om te kijken of het document zichtbaar is voor de gebruiker.
- Deze API is read-only, je kunt alleen gegevens vragen, je kunt er niets mee instellen.
- Je kunt PageVisibility op twee manieren bevragen:
- Met document.visibilityState Dit kan drie waarden aannemen, te weten:
• 'visible' Het document is zichtbaar voor de gebruiker.
• 'hidden' Het document is niet zichtbaar voor de gebruiker.
• 'unloaded' De browser gaat het document verwijderen. Het document is niet meer zichtbaar voor de gebruiker. - Met document.hidden Dit is een boolean waarde, dus
true(als het document niet zichtbaar is) offalse(als het document wel zichtbaar is).
Deze aanpak is 'historisch' en zal t.z.t. verdwijnen uit de specificaties. Gebruik ervan wordt afgeraden.
- Met document.visibilityState Dit kan drie waarden aannemen, te weten:
- In oude JavaScript-code kun je ook nog de waarde prerender tegenkomen. Die is echter uit de specificatie geschrapt
en blijft verder onbesproken.
- Om onderscheid te maken tussen een zichtbaar of niet-zichtbaar document kun je het beste testen met:
if (document.visibilityState == 'visible') { … }
Dit omdat er één visibilityState is waarbij het document zichtbaar is, tegen twee waarbij het document niet zichtbaar is. De hier genoemde test is eenduidig, dat voorkomt problemen.
- Om te kunnen reageren op verandering van visibilityState is er het event visibilitychange bedacht. Je kunt
met de JavaScript function addEventListener een event-handler maken. Een vergelijkbaar HTML-attribuut onvisibilitychange
staat (volgens mij) niet in de HTML-standaarden.
- Gebruiken in je eigen site
- Gebruik de code zoals hier onder is aangegeven.
- Meer informatie over het gebruik van de <audio>-tag vind je in het item Geluid op je website: <audio>-tag
Gebruik:
- De code staat gedeeltelijk in de <HEAD> en gedeeltelijk in de <BODY>.
De code van het voorbeeld ziet er als volgt uit:
(Zet dit in de <HEAD>).
<script>
document.addEventListener("visibilitychange", function() {
if (document.visibilityState == 'visible') {
document.getElementById('mySound').play();
} else {
document.getElementById('mySound').pause();
}
});
</script>
(Zet dit in de <BODY> op de plaats waar de mediaspeler moet verschijnen).
<div align="center">
<audio id="mySound" controls loop>
<source src="happyday.mp3" type="audio/mpeg">
<source src="https://www.webmasterij.nl/html/html-3/happyday.ogg"
type="audio/ogg">
<source src="https://www.webmasterij.nl/html/html-3/happyday.wav"
type="audio/wav">
<p>Audio is niet hoorbaar, HTML5 audio wordt door uw browser waarschijnlijk niet ondersteund.</p>
</audio>
</div>
