May 2014 – Lesmat

Javascript audio speler

Met de html audio-tag is het mogelijk audiobestanden in de webbrowser af te spelen. Daarbij is het mogelijk gebruik te maken van de standaard meegeleverde ‘controls’, maar natuurlijk is het stijlvoller om de vormgeving van de audio-controls af te stemmen op de website waar de audio geplaatst wordt. Dat is mogelijk door zelf besturingselementen te maken en die met Javascript de audio-tag aan te sturen.

Om te beginnen hebben we een audio-tag nodig. Omdat niet alle browsers dezelfde audiobestanden kunnen afspelen gebruiken we 2 source-tags voor verschillende versies van hetzelfde audio bestand. De audio-tag plaatsen we in een div met de class-naam ‘audioSpeler’.

Als we het resultaat testen in de browser is er niets te zien of te horen. Een audio-tag is zelf niet zichtbaar. Omdat we niet hebben aangegeven dat we de standaard ‘controles’ van de browser willen gebruiken, zijn die controls ook niet te zien. De browser is ingesteld om een audio bestand meteen te pauzeren, daarom is er niets te horen. We maken nu eerst een afspeelknop (p-tag met de tekst ‘start’) zodat we die kunnen gebruiken om het afspelen te starten. We plaatsen de afspeelknop in een div met de naam ‘knoppen’ zodat we later makkelijk meer functionaliteit toe kunnen voegen. Als op de knop geklikt wordt, wordt de functie ‘afspelen()’ uitgevoerd.

<body>
<div class=”audioSpeler”>
<div class=”knoppen”>
<p onclick=”afspelen()”>start</p>
</div>
<audio>
<source src=”sound.mp3″ type=”audio/mp3″/>
<source src=”sound.wav” type=”audio/wav”/>
</audio>
</div>

}
</script>
</body>

Om het audiobestand te kunnen afspelen met Javascript, moet Javascript de audio-tag eerst kunnen vinden. Daar maken we een variabel met de naam ‘audio’ voor aan. In onderstaand voorbeeld geven weJavascript eerst de opdracht de (eerste) audiospeler te zoeken en daarna binnen de audiospeler te zoeken naar de (eerste) audio-tag.

function afspelen()
{

}
</script>

Vervolgens kunnen we de functie ‘afspelen()’ gebruiken om de opdracht te geven het audio bestand af te spelen:

function afspelen()
{
audio.play();
}
</script>

Vaak wordt de afspeelknop gebruikt om een het afspelen te starten, maar ook te stoppen: Als de speler is gepauzeerd moet het afspelen gestart worden, als de speler al afspeelt moet het afspelen gepauzeerd worden. Dat is eenvoudig te bereiken door ‘if()’ en ‘else’ te gebruiken. Javascript kan de eigenschappen van de audio-tag lezen. Een van die eigenschappen is ‘paused’. We laten Javascript kijken of de audio-tag gepauzeerd is. Als dat zo is moet de audio-tag afgespeeld worden. Anders, als de audio-tag niet gepauzeerd is, moet de audio-tag gepauzeerd worden.

function afspelen()
{
if(audio.paused==true)
{
audio.play();
}
else
{
audio.pause();
}
}
</script>

Als we ons script testen in de browser is het duidelijk te horen of het audio bestand afgespeeld wordt of niet, maar het communiceert beter als dat ook te zien is. Eerst gebruiken we een variabel met de naam ‘startKnop’ om Javascript de startknop te laten zoeken (de eerste p-tag van de audiospeler). Daarna gebruiken we de opdracht ‘innerHTML’ om de tekst van de startknop aan te passen als de werking daarvan verandert.

function afspelen()
{
if(audio.paused==true)
{
audio.play();
startKnop.innerHTML=”pauze”;
}
else
{
audio.pause();
startKnop.innerHTML=”start”;
}
}
</script>

Naast het starten en stoppen van het afspelen kunnen we ook het volume aanpassen. Eerst plaatsen we een extra p-tag met de tekst ‘vol +’. Als deze p-tag aangeklikt wordt wordt de functie ‘volume()’ uitgevoerd.

<div class=”audioSpeler”>
<div class=”knoppen”>
<p onclick=”afspelen()”>start</p>
<p onclick=”volume()”>vol +</p>
</div>
<audio>
<source src=”sound.mp3″ type=”audio/mp3″/>
<source src=”sound.wav” type=”audio/wav”/>
</audio>
</div>

Als op de knop ‘vol +’ gekikt wordt, wordt de functie ‘volume()’ uitgevoerd. Die functie kijkt naar de waarde van volume en telt daar 0.1 bij op (+=0.1).

function volume()
{
audio.volume+=0.1;
}

We maken een extra knop met de tekst ‘vol -‘ om het volume ook lager te kunnen maken. Deze knop voert dezelfde functie ‘volume()’ uit. Die gaan we zometeen aanpassen zodat dezelfde functie het volume hoger of lager kan zetten.

<div class=”audioSpeler”>
<div class=”knoppen”>
<p onclick=”afspelen()”>start</p>
<p onclick=”volume()”>vol +</p>
<p onclick=”volume()”>vol -</p>
</div>
<audio>
<source src=”sound.mp3″ type=”audio/mp3″/>
<source src=”sound.wav” type=”audio/wav”/>
</audio>
</div>

De ronde haken achter een functie kunnen we gebruiken om informatie door te geven die gebruikt moet worden als de functie uitgevoerd wordt. Als de functie ‘volume()’ wordt uitgevoerd kunnen we aangeven of het geluid harder of zachter moet.

<div class=”audioSpeler”>
<div class=”knoppen”>
<p onclick=”afspelen()”>start</p>
<p onclick=”volume(‘harder’)”>vol +</p>
<p onclick=”volume(‘zachter’)”>vol -</p>
</div>
<audio>
<source src=”sound.mp3″ type=”audio/mp3″/>
<source src=”sound.wav” type=”audio/wav”/>
</audio>
</div>

De gegevens (parameters) die tussen de ronde haken doorgegeven worden aan de functie kunnen we binnen het uitvoeren van de functie gebruiken. Eerst wordt er binnen de functie een variabel gemaakt (die alleen binnen de functie herkend wordt).

function afspelen()
{
if(audio.paused==true)
{
audio.play();
startKnop.innerHTML=”pauze”;
}
else
{
audio.pause();
startKnop.innerHTML=”start”;
}
}

function volume(waarde)
{
audio.volume+=0.1;
}
</script>

Vervolgens kunnen we de waarde die naar de functie gestuurd wordt gebruiken. Als de waarde ‘harder’ doorgegeven wordt, moet het volume hoger, als de waarde ‘zachter’ doorgegeven wordt, maken we het volume lager.

function volume(waarde)
{
if(waarde==”harder”)
{
audio.volume+=0.1;
}
else if(waarde==”zachter”)
{
audio.volume-=0.1;
}
}

Na een aantal keer klikken is het waar te nemen dat het geluid harder en zachter gaat. Toch is het gebruiksvriendelijker om ook visueel te laten weten dat het volume aangepast wordt. Eerst maken we een extra p-tag om de waarde van het volume in weer te geven.

<body>
<div class=”audioSpeler”>
<div class=”knoppen”>
<p onclick=”afspelen()”>start</p>
<p onclick=”volume(‘harder’)”>vol +</p>
<p onclick=”volume(‘zachter’)”>vol -</p>
<p>vol:1</p>
</div>
<audio>
<source src=”almeria/04 Moveonday.mp3″ type=”audio/mp3″/>
<source src=”almeria/04 Moveonday.wav” type=”audio/wav”/>
</audio>
</div>

Als laatste stap maken we een variabel met de naam ‘volumeWaarde’ waarin we Javascript vertellen waar de juiste p-tag gevonden kan worden. Als het volume aangepast wordt door de functie ‘volume()’ wordt in de p-tag ‘volumeWaarde’ de tekst aangepast.

function afspelen()
{
if(audio.paused==true)
{
audio.play();
startKnop.innerHTML=”pauze”;
}
else
{
audio.pause();
startKnop.innerHTML=”start”;
}
}

function volume(waarde)
{
if(waarde==”harder”)
{
audio.volume+=0.1;
}
else if(waarde==”zachter”)
{
audio.volume-=0.1;
}
volumeWaarde.innerHTML=audio.volume;
}
</script>

De volumeWaarde heeft nog een schoonheidsfoutje. Hoewel we de waarde van het volume met ‘0.1’ veranderen, maakt Javascript van de aangepaste waarde een getal met flink aantal cijfers achter de komma. De Javascript functie ‘toFixed()’ kan dat getal afronden. Tussen de ronde haken geven we aan dat het getal afgerond moet worden op 1 cijfer achter de komma.

function volume(waarde)
{
if(waarde==”harder”)
{
audio.volume+=0.1;
}
else if(waarde==”zachter”)
{
audio.volume-=0.1;
}
volumeWaarde.innerHTML=audio.volume.toFixed(1);
}

Javascript en html formulieren gebruiken

Een html formulier wordt doorgaans gebruikt om gebruikers informatie door te geven aan de server, die de informatie bijvoorbeeld in een database kan opslaan. Maar formulieren kunnen in combinatie met Javascript ook toegepast worden binnen een webpagina. Er zijn een aantal verschillende mogelijkheden binnen een html formulier die in principe op dezelfde manier werken: Binnen een formulier kan de gebruiker een keus aangeven. Er zijn verschillende manieren om die keus aan te geven, bijvoorbeeld door een checkbox aan te vinken, een radiobutton te selecteren, een tekstveld in te vullen, etc.

In onderstaand voorbeeld bekijken we hoe javascript kan samenwerken met een html formulier. Om te beginnen hebben we een formulier nodig. We gebruiken 3 radiobuttons om een keus aan te geven. Elke radiobutton heeft een naam en een waarde nodig. In dit voorbeeld krijgen de knoppen allemaal dezelfde naam. Dat zorgt ervoor dat de gebruiker maar 1 knop tegelijk kan selecteren. De knoppen krijgen wel een verschillende waarde (value) zodat Javascript kan lezen welke keus gemaakt is.

We hebben een formulier dat op zich werkt, maar niet zo gebruiksvriendelijk is. We gebruiken een h3-tag om aan te geven wat de bedoeling is en gebruiken p-tags om bij elke knop aan te geven wat de keus is die geselecteerd kan worden. Bij het openen van de website wordt de eerste knop alvast geselecteerd door de status van deze knop op ‘checked’ in te stellen.

<body>
<form name=”formulier” action=””>
<h3>Maak een keuze:</h3>
<p> keus1<input type=”radio” name=”keus” value=”keus1″ checked=”checked”/></p
<p> keus2<input type=”radio” name=”keus” value=”keus2″ /> </p>
<p> keus3<input type=”radio” name=”keus” value=”keus3″ /> </p>
</form>
</body>

Nu kunnen we javascript gebruiken om de gemaakte keus te lezen. Om te beginnen moet er een functie uitgevoerd worden als de waarde van 1 van de radiobuttons verandert (onchange). we noemen deze functie ‘kies’.

<body>
<form name=”formulier” action=””>
<h3>Maak een keuze:</h3>
<p> keus1<input type=”radio” name=”keus” value=”keus1″ checked=”checked” onchange=”kies()”/> </p>
<p> keus2<input type=”radio” name=”keus” value=”keus2″ onchange=”kies()”/> </p>
<p> keus3<input type=”radio” name=”keus” value=”keus3″ onchange=”kies()”/> </p>
</form>
<script type=”text/javascript”>

function kies()
{

}
</script>
</body>

Vervolgens gaan we de functie ‘kies’ gebruiken om de tekst van de h3-tag aan te passen. Om informatie uit het formulier te kunnen lezen en om binnen het formulier de h3-tag te kunnen vinden, moeten de h3-tag en het formulier eerst opgeslagen worden in een variabel. Daarna kunnen we ‘innerHTML’ gebruiken om de tekst binnen de h3-tag aan te passen. Als 1 van de knoppen aangeklikt wordt komt er in de h3-tag te staan: ‘Je keus is: ‘.

function kies()
{
formulierH3.innerHTML=”Je keus is: “
}
</script>

We hebben nu een formulier dat op Javascript reageert: de tekst verandert als de selectie verandert. Nu laten we Javascript de geselecteerde keus lezen en die bijschrijven in de h3-tag. De functie wordt wel wat ingewikkelder, want Javascript moet eerst kijken welke knop geselecteerd is (checked). Daarvoor moeten we eerst een lijst maken met de mogelijke opties. die lijst bestaat uit alle input-tags in het formulier. We slaan de lijst op in een variabel.

function kies()
{
formulierH3.innerHTML=”Je keus is: “
}
</script>

Vervolgens kunnen we de opdracht beschrijven die Javascript moet uitvoeren als de eerste input-tag geselecteerd is. Als de eerste input-tag geselecteerd is, verandert de tekst in de h3-tag.Daar wordt nog steeds bijgeschreven ‘Je keus is: ‘ maar daar wordt nu aan toe gevoegd de waarde (value) van de geselecteerde knop. De value van de eerste input-tag is ‘keus1’. Als de eerste knop geselecteerd is, komt er dus in de h3-tag te staan: ‘Je keus is: keus1’.

function kies()
{
if(opties[0].checked==true)
{
formulierH3.innerHTML=”Je keus is: ” + opties[0].value;
}
}
</script>

Dit kunnen we herhalen voor de tweede en derde knop.

Naast het invoeren van een keus kan een html formulier op verschillende manieren gebruikt worden. Bijvoorbeeld om het uiterlijk of de inhoud van de website aan te passen. In dit geval kunnen we de waarde van de geselecteerde knop gebruiken om het uiterlijk van de andere knoppen aan te passen. Als de eerste knop geselecteerd is wordt de transparantie van de tweede en derde p-tag van het formulier aangepast. Daarvoor maken we eerst weer een variabel met daarin een lijst van alle p-tags.

Dit is natuurlijk makkelijk uit te breiden naar de andere knoppen: Als de tweede knop geselecteerd is, wordt de transparantie van de eerste en derde p-tag gehalveerd. Als de derde knop geselecteerd is, wordt de transparantie van de eerste en tweede p-tag gehalveerd.

WordPress verkort bericht met een thumbnail

Met WordPress is het mogelijk om een overzicht van verkorte berichten weer te geven. Dat kan bijvoorbeeld door de opdracht ‘the_excerpt()’ te gebruiken in plaats van ‘the_content()’ om de eerste paar woorden van een bericht te laden in plaats van het hele bericht.

Een andere manier is om van een bericht alleen een (door de schrijver geselecteerde) afbeelding te laden. Bij het schrijven van een bericht kan aangegeven worden welke afbeelding gebruikt moet worden als ‘thumbnail’. Standaard is deze optie niet aanwezig in WordPress. Om deze optie te activeren hebben we een extra php-bestand nodig: ‘functions.php’.

In ‘functions.php’ worden alle aanvullende functies beschreven die niet standaard bij een thema horen. We maken een nieuw (leeg) php bestand en slaan dat op als ‘functions.php’.

In ‘functions.php’ schrijven we de opdracht om thumbnails te ondersteunen:

<?php add_theme_support( ‘post-thumbnails’ ); ?>

Nu kunnen we in onze homepage (index.php) de thumbnails gebruiken. Eerst hebben we de standaard post-loop nodig om alle bericht informatie te laden. In onderstaand voorbeeld worden de berichten geladen een div met id-naam ‘berichten’.

Als het bericht geladen wordt willen we alleen de titel van het bericht en de door de schrijver geselecteerde thumbnail zien. Omdat de gebruiker de mogelijkheid moet hebben om door te kunnen klikken naar het volledige bericht, plaatsen we de titel en de thumbnail samen in een a-tag met de class-naam ‘bericht_thumbnail’. We gebruiken de WordPress opdracht ‘the_permalink()’ om te linken naar het bijbehorende bericht.

Let op! We gebruiken nu html en php door elkaar. Vergeet dus niet de php-tags op de juiste plaats te openen en te sluiten. Eerst maken we de knop (a-tag).

Vervolgens plaatsen we in de knop een h4-tag met daarin de titel van het bericht en een thumbnail (die automatisch in een img-tag geplaatst zal worden).

We hebben nu een aanklikbare thumbnail. Als de thumbnail aangeklikt wordt, wordt de gebruiker doorverwezen naar het volledige bericht. Standaard gebruikt WordPress het bestand ‘index.php’ om het bericht te tonen. Om het bericht een eigen opmaak te geven is het bestand ‘single.php’ nodig.

WordPress bericht in aparte pagina vertonen

Single post layout

In WordPress wordt content vaak geplaatst door gebruik te maken van posts/berichten. Bij het plaatsen van veel korte berichten is dat geen probleem, maar als je regelmatig langere berichten wilt plaatsen wordt je website al snel onoverzichtelijk. WordPress heeft daarvoor de oplossing om berichten verkort weer te geven. Er wordt een verkorte weergave van het bericht geplaatst met een link naar het volledige bericht. Het volledige bericht wordt als een aparte pagina geladen.

Er is maar een kleine aanpassing nodig om in plaats van een volledig bericht een verkort bericht te laden. In plaats van de functie ‘the_content()’te gebruiken voor het plaatsen van het volledige bericht, wordt de functie ‘the_excerpt()’ gebruikt voor het plaatsen van de verkorte tekst.

In onderstaand voorbeeld plaatsen we de volledige berichten in een div met de id ‘berichten’.

Om in plaats van volledige berichten, verkorte berichten te plaatsen is een kleine aanpassing nodig: We vervangen de functie ‘the_content()’ voor de functie ‘the_excerpt()’:

Als we een verkorte weergave van het bericht gebruiken hebben we ook een link naar de volledige versie nodig. Hiervoor gebruiken we de titel van het bericht. In de h1-tag plaatsen we een a-tag die linkt naar het volledige bericht. Het link adres naar het volledige bericht laten we WordPress zelf maken met de functie ‘the_permalink()’.

Bij het aanklikken van de de titel wil WordPress de volledige post op een aparte pagina vertonen. De opmaak voor die pagina moet wel omschreven worden. Standaard wordt voor de opmaak van het enkele bericht gebruik gemaakt van ‘index.php’. Om een bericht een eigen opmaak te geven kunnen we een nieuw php-bestand maken met de naam ‘single.php’.

Omdat we nu een enkel bericht laden is de post-loop niet langer nodig. Alleen het gevraagde bericht wordt vertoond:

Het complete thema bestaat nu uit 3 bestanden: ‘index.php’, ‘single.php’ en ‘style.css’.

WordPress post-loop filteren

We hebben in een ander voorbeeld gekeken hoe we berichten verschillend vorm kunnen geven door de categorie van het bericht te gebruiken als css-class. Dat geeft al aardig wat mogelijkheden voor het vormgeven van de berichten, maar het is erg lastig om met die methode berichten op verschillende plaatsen binnen een pagina te plaatsen.

Standaard maakt WordPress gebruik van een opdracht die alle berichten uit de database haalt en ze binnen je pagina plaatst. In onderstaand voorbeeld worden alle berichten binnen een div geplaatst met de class ‘post’. De titel van het bericht wordt binnen een h1-tag geplaatst en de content van het bericht binnen een p-tag.

Als we een filter toevoegen aan de opdracht om berichten te plaatsen is het mogelijk om niet alle berichten te plaatsen, maar een selectie van berichten te maken. In onderstaand voorbeeld worden alleen berichten geplaatst met de categorie “producten”.

Deze opdracht om berichten te plaatsen kun je verschillende keren gebruiken, steeds met een ander filter. Bijvoorbeeld om links op een pagina producten te vertonen, en rechts op de pagina nieuwsberichten te plaatsen. In onderstaand voorbeeld wordt de opdracht om berichten te plaatsen 2 keer herhaalt. Het enige verschil is de categorie-naam die gefilterd wordt.