WordPress Gids
Werken met het Audio-blok

Audio-blok icon
Audio-blok icon

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.

Voeg een Audio-blok toe aan de 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 toevoegen aan een pagina

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:

Omzetten van het Audio-blok naar een ander bloktype

Je kunt een blok omzetten naar een ander bloktype door in het blokmenu links op het bloklogo te klikken.

Het Audio-blok kan alleen worden omgezet naar een Bestand-blok.

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 icon. 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 icon. Dit icon 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 icon. Klikt de bezoeker op deze puntjes op de live pagina, dan verschijnt een downloadknop die de bezoeker het audiobestand laat downloaden .

Zet een onderschrift onder de audiospeler

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.

Onderschrift toevoegen aan een audio-bestand

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.

De blokmenu opties van het Audio-blok

Uitlijning

Het blokmenu van het Audio-blok bevat een aantal opties om het blok uit te lijnen op de pagina. Klik hiervoor op het dropdown-pijltje (Dropdown icon klein):

Blok links uitlijnen icon:het blok links uitlijnen, naast het blok dat er onder staat
Blok centreren icon:het blok centreren
Blok rechts uitlijnen icon:het blok rechts uitlijnen, naast het blok dat er onder staat
Blok grote breedte icon:het blok in wijde breedte laten zien
Blok volledige breedte icon: het blok in volledige breedte laten zien

Blok uitlijningstips:

  • Het blok komt in eerste instantie zonder uitlijning op de pagina. Dit betekent dat het blok 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.
  • Link uitlijnen en rechts uitlijnen werkt samen met het blok dat er direct onder staat. Wil je het blok links of rechts naast een specifieke paragraaf of ander blok zetten, verplaats het blok dan blok naar direct boven dat blok. Selecteer dan pas links of rechts uitlijnen.
  • De uitlijningsoptie Grote breedte vergroot het blok 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 het blok tot de randen van het browserscherm.

De instellingen sidebar van het Audio-blok

Audio-instellingen

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

De audio-instellingen in de instellingen sidebar bij het Audio-blok

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.

Voorladen

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.

Geavanceerde styling

Belangrijk: onderstaande geldt alleen voor gevorderde gebruikers met verstand van de CSS taal. Weet wat je doet!

Zijn de standaard opties voor dit blok niet voldoende, en wil je meer invloed op het uiterlijk van het blok, maak dan gebruik van CSS voor de styling.

Geavanceerde CSS styling voor je blok

In je stylesheet, of met behulp van een CSS plugin als Simple CSS, maak je een class voor de inhoud van het blok. Deze link je vervolgens aan het blok of aan meerdere blokken van hetzelfde type.

Selecteer hiervoor het blok waarvoor je een stijl hebt gemaakt, en klik in de instellingen sidebar op Geavanceerd. Er verschijnt een vak met de naam Extra CSS class. Hierin zet je de naam van de gemaakte CSS class minus de punt.

Call Now Button