WordPress Gids
Werken met het Audio-blok

Audio-blok

Het Audio-blok laat je een – eenvoudige – audiospeler op de pagina zetten. Het audiobestand kan op de site zelf staan, of op een andere site. Heb je een link naar een extern audiobestand, dan kun je deze in het audio-blok toevoegen aan de pagina .

Het Audio-blok geeft je echter meer mogelijkheden dan alleen een audiospeler op een pagina zetten. Het laat je de audiospeler op diverse manieren uitlijnen, en geeft je diverse afspeelopties en preload-opties.

In deze gids over het Audio-blok komen de volgende onderwerpen aan bod:

Hoe voeg je een Audio-blok toe aan je pagina

Plaats het Audio-blok vanuit de sectie Algemene blokken waar je deze wilt op de pagina. Gebruik je het Audio-blok regelmatig, dan kan het ook in de sectie Meest gebruikt staan.

Wanneer het Audio-blok is geplaatst vraagt het om een audiobestand:

Audio-blok: audiobestand toevoegen

Je hebt vier opties om de afbeelding op de pagina te zetten:

  • Slepen: sleep het audiobestand van je computer naar het grijze blok en laat het daar los. De afbeelding wordt dan geladen naar de site, waarna je het dan op de pagina kunt zetten.
  • Uploaden: laad het audiobestand vanaf je computer naar de site, waarna je het dan op de pagina kunt zetten.
  • Mediabibliotheek: selecteer een afbeelding die al op de site is geladen in de Mediabibliotheek. Je kunt hier eventueel ook nog nieuwe afbeeldingen uploaden.
  • Invoegen via URL: staat de afbeelding online maar niet in de Mediabibliotheek op je eigen site, dan kun je een link plakken naar die afbeelding toe. Je bent dan wel afhankelijk van de beheerder van de afbeelding of deze blijft staan op die plaats. Ik kies altijd voor het zelf laden van een afbeelding.

Selecteer één van deze opties om het audiobestand te koppelen aan het Audio-blok. Is het bestand gekozen en gekoppeld, dan zie het Audio-blok er zo uit:

Audio-blok: audiobestand toegevoegd

De verschillende onderdelen van de audiospeler

De geplaatste eenvoudige audiospeler bestaat uit meerdere onderdelen. Alle onderdelen van de audiospeler werken alléén wanneer de audiospeler wordt bekeken op de live pagina, niet in de editor.

Start/stop en tijdsaanduiding Audio-blok: start/stop en tijdsaanduiding

Aan de linkerkant van de audiospeler staat het start/stop icoon. Daarnaast staat de tijdsaanduiding: hoever het audiobestand is gespeeld / hoelang het audiobestand duurt.

Voortgangsbalk Audio-blok: voortgangsbalk

De voortgangsbalk laat zien waar in het bestand de audiospeler is (het rondje), hoeveel van het audiobestand geladen is (de donkere lijn), en hoeveel van het bestand nog moet laden (de lichtere lijn).

Geluid aan/uit en downloaden Audio-blok: mute en download

Rechts direct naast de voortgangsbalk staat het geluid aan/uit icoon. Dit icoon stelt de bezoeker in staat om het geluid aan of uit te zetten. het bestand speelt ondertussen wel door.

Audio-blok: downloaden

Helemaal rechts op de audiospeler staan drie verticale puntjes: het meer icoon. Klikt de bezoeker op deze puntjes op de live pagina, dan verschijnt een downloadknop die de bezoeker het audiobestand laat downloaden .

Hoe zet je een onderschrift onder het audiobestand

Het Audio-blok zet een nogal eenvoudige audiospeler op de pagina. Er staat zelfs geen naam bij van het audiobestand. Dat is nogal lastig voor de bezoeker, aangezien deze niet weet welk bestand er aan de audiospeler gekoppeld is.

Je kunt gelukkig eenvoudig een onderschrift (de naam van de podcast of de titel van het nummer) aan de speler toevoegen, zodat de bezoeker weet waar deze naar gaat luisteren.

Klik hiervoor op de audiospeler. Onder de speler komt de tekst Onderschrift schrijven… te staan. Klik op deze tekst en schrijf het onderschrift.

Audio-blok: onderschrift toevoegen

Met de vier stijlknoppen, die in de kleine toolbar boven de onderschrifttekst staat wanneer je op de tekst staat, kun je de tekst vet maken, schuin zetten, doorhalen, en je kunt een link toevoegen aan de tekst. Heb je meer opmaakmogelijkheden nodig, dan kun je ook HTML codes in deze tekst gebruiken.

Hoe lijn je de audiospeler uit op je pagina

De plaats waarop de audiospeler in de pagina komt te staan, regel je met de uitlijningsopties in het blokmenu van het Audio-blok:

Audio-blok: uitlijningsinstellingen

De verschillende uitlijningsopties die je kunt gebruiken voor de audiospeler zijn:

Niet uitgelijnd

Audio-blok: uitlijningsinstellingen - niet uitgelijnd

Links uitlijnen ⇢ Links uitlijnen

Audio-blok: uitlijningsinstellingen - links uitlijnen

Centreren ⇢ Centreren

Audio-blok: uitlijningsinstellingen - centreren

Rechts uitlijnen ⇢ Rechts uitlijnen

Audio-blok: uitlijningsinstellingen - rechts uitlijnen

Grote breedte ⇢ Grote breedte

Audio-blok: uitlijningsinstellingen - grote breedte

Volledige breedte ⇢ Volledige breedte

Audio-blok: uitlijningsinstellingen - grote breedte

Audio-blok uitlijningstips:

  • De audiospeler die je plaatst komt in eerste instantie zonder uitlijning op de pagina. Dit betekent dat het blok met de audiospeler de gehele breedte van de inhoud inneemt, zonder dat er tekst of een afbeelding naast kan staan. Heb je een andere optie geselecteerd, maar wil je weer terug naar de situatie zonder uitlijning, dan klik je op de gekozen optie zodat deze niet meer geselecteerd is.
  • Niet uitgelijnd en gecentreerd hebben bij het Audio-blok hetzelfde effect.
  • Link uitlijnen en rechts uitlijnen werkt samen met het blok dat er direct onder staat. Wil je de audiospeler links of rechts naast een specifieke paragraaf of ander blok zetten, verplaats dan eerst het Audio-blok naar direct boven dat blok. Selecteer dan pas links of rechts uitlijnen.
  • Verplaatsen van het Audio-blok werkt alleen wanneer de audiospeler niet link of rechts is uitgelijnd. Wil je een links of rechts uitgelijnde audiospeler verplaatsen, selecteer dan het blok, kies een andere uitlijningsoptie (ik selecteer meestal centreren) en verplaats dan het Audio-blok naar de gewenste plaats.
  • De uitlijningsoptie Grote breedte vergroot de audiospeler tot deze tot de randen van het de content sectie van je thema reikt, zonder rekening te houden met de padding (de ruimte tussen de rand van de tekst en de rand van de content sectie).
  • De uitlijningsoptie Volledige breedte vergroot de audiospeler tot de randen van het browserscherm.

Wat zijn de audio-instellingen voor de audiospeler

Bij een eenvoudige audiospeler horen weinig opties, en de audiospeler in het Audio-blok maakt dit helemaal waar.

De instellingen voor de audiospeler zijn:

Automatisch afspelen

Deze instelling zorgt ervoor dat het audiobestand begint met afspelen zodra het audiobestand is geladen. Dat is meestal vlak nadat de bezoeker op de pagina komt.

Je kunt deze optie aanzetten door op de schakelaar voor de optie te klikken. Deze gaat dan in de aan-stand: Audio-blok: automatisch afspelen in aan-stand Klik er nogmaals op, en de schakelaar gaat terug in de uit-stand.

Eén van de grootste ergernissen op websites is het automatisch afspelen van muziek en video. Ik raad dan ook aan deze optie altijd in de uit-stand te laten staan.

Lus

Deze instelling zorgt ervoor dat het bestand, nadat het helemaal gespeeld is, overnieuw begint met afspelen.

Preload

Deze instelling bepaalt of en hoe het audiobestand laadt wanneer de pagina wordt geladen. De drie opties zijn:

  • Geen: het audiobestand wordt niet geladen wanneer de pagina wordt geladen.
  • Automatisch: het audiobestand wordt niet geladen wanneer de pagina wordt geladen.
  • Metadata: alleen de metadata (onder meer de naam van de artiest, de titel van het nummer) van het audiobestand wordt geladen wanneer de pagina wordt geladen.

Style de audiospeler met CSS

Zijn de standaard opties voor de audiospeler niet voldoende, en wil je meer invloed op het uiterlijk van de audiospeler die je plaatst, dan kun je gebruik maken van CSS voor de styling van je audiospeler.

Dit geldt trouwens alleen voor gevorderde gebruikers met verstand van de CSS taal. Weet wat je doet!

Audio-blok: geavanceerd

In je stylesheet, of met behulp van een CSS plugin als Simple CSS, maak je een class voor je afbeelding. Deze link je vervolgens aan je audiospeler(s).

Selecteer hiervoor de audiospeler, en klik bij de blokinstellingen op Geavanceerd. Er verschijnt een vak met de naam Extra CSS class. Hierin zet je de naam minus de . van de gemaakte CSS class-naam.