I modsætning til video, er autoplay ikke længere tilladt for audio elementet. Det er Chrome der har startet dette tiltag for at modvirke at der pludselig bliver spillet lyd på en side du lige har åbnet - og de andre browsere har fulgt deres eksempel.
Det kan du læse mere om her: https://developer.chrome.com/blog/autoplay/
Muted autoplay is always allowed. Autoplay with sound is allowed if: User has interacted with the domain (click, tap, etc.). On desktop, the user's Media Engagement Index threshold has been crossed, meaning the user has previously played video with sound. The user has added the site to their home screen on mobile or installed the PWA on desktop. Top frames can delegate autoplay permission to their iframes to allow autoplay with sound.
Der er altså enkelte undtagelser hvor det godt kan lade sig gøre. Det kræver dog at google har registret at brugerens "User Engagement Index" er over et vist niveau for den pågældende side før de tillader det...
Det er muligt som udvikler at "bypasse" denne beskyttelse midlertidigt ved at åbne chrome gennem kommandopromten (cmd) med disse attributter:
Windows
chrome.exe --autoplay-policy=no-user-gesture-required
Mac
/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --autoplay-policy=no-user-gesture-required
Dette virker naturligvis kun for udvikleren i browseren der er startet på denne specifikke måde, og denne løsning kan derfor ikke anbefales.
Som beskrevet i https://developer.chrome.com/blog/autoplay/ kræver det at brugere interagerer med siden i form af et klik for at starte brugen af lyd. Når først den er startet kan efterfølgende playere godt spille på den samme side.
Jeg har derfor lavet to eksempler på afspillere, hvor selve 'audio controls' er skiftet ud med vores eget lille højtaler ikon. For at gøre dette er det dog nødvendigt at anvende JavaScript, men det er ganske simpelt alligevel.
I dette eksempel har jeg blot indsat en div boks med et højtaler ikon, og brugt JS til at ændre playerens tilstand fra 'pause' til 'play'.
Hvis man nu alligevel ikke ønsker at høre mere på den lyd der spiller, kan man i dette eksempel klikke på højtaleren igen for at pause lyden. - Bemærk scriptet i bunden af html koden.
Lav en sektion med titlen 'Animation' på din side til 'Kreativ Webprog.' hvor du linker til en .zip fil med resultatet af dine øvelser. Indsæt også gerne et screenshoot af hvordan det kom til at se ud (du kan evt. gøre billedet til et link til .zip filen bagefter).
Slut af med en kort reflektion. Hvad har du lært/fået ud af dagens øvelser? Var der noget der drillede, og hvad var løsningen? Føler du dig nogenlunde i stand til at arbejde med emnet nu?