Geluid toevoegen aan een HTML5-webpagina

HTML5 maakt het eenvoudig om geluid en muziek aan uw webpagina's toe te voegen met het element. Het moeilijkste is om de verschillende bronnen te maken die u nodig hebt om ervoor te zorgen dat uw geluidsbestanden op de meest uiteenlopende browsers worden afgespeeld.

Het voordeel van HTML5 is dat u geluid kunt insluiten door slechts een paar tags te gebruiken. De browsers spelen dan het geluid alsof ze een afbeelding weergeven wanneer u een gebruikt

IMG element.

Geluid toevoegen aan een HTML5-webpagina

U hebt een HTML-editor, een geluidsbestand (bij voorkeur in MP3-indeling) en een geluidsbestandsomzetter nodig.

1. Ten eerste hebt u een geluidsbestand nodig. Het is het beste om het bestand op te nemen als MP3 (

   .mp3) omdat dit een hoge geluidskwaliteit heeft en wordt ondersteund door de meeste browsers (Android 2.3+, Chrome 6+, IE 9+, iOS 3+ en Safari 5+).

2. Converteer uw bestand naar Vorbis-formaat (

   .ogg) om toe te voegen in Firefox 3.6+ en Opera 10.5+ ondersteuning. U kunt een converter gebruiken zoals die op Vorbis.com. Je kunt je MP3 ook converteren naar een WAV-bestandsformaat (

   .wav) om ondersteuning voor Firefox en Opera te krijgen. Ik raad je aan om je bestand in alle drie de typen te plaatsen, alleen voor de beveiliging, maar het meeste wat je nodig hebt, is MP3 en een ander type.

3. Upload alle audiobestanden naar uw webserver en noteer de map waarin u ze hebt opgeslagen. Het is een goed idee om ze in een submap te plaatsen voor audiobestanden, zoals de meeste ontwerpers afbeeldingen opslaan in een

   afbeeldingen directory.

4. Voeg de toe

   AUDIO element naar uw HTML-bestand waar u de geluidsbestanden wilt weergeven.

5. Plaats

   BRON elementen voor elk audiobestand dat u uploadt binnen de

   AUDIO element:

6. 1. Elke HTML in de

      AUDIO element zal worden gebruikt als een fallback voor browsers die de

      AUDIO element. Dus voeg wat HTML toe. De eenvoudigste manier is om HTML toe te voegen zodat ze het bestand kunnen downloaden, maar je kunt ook HTML 4.01-insluitmethoden gebruiken om het geluid af te spelen. Hier is een eenvoudige terugval:

      Uw browser ondersteunt geen audioweergave, download het bestand: MP3,

   2. Vorbis, WAV

7. Het laatste dat u hoeft te doen, is uw AUDIO-element sluiten:

   1. Als u klaar bent, ziet uw HTML er als volgt uit:

   4. Uw browser ondersteunt geen audioweergave, download het bestand:

   5. MP3,

   6. Vorbis

   7. WAV

Aanvullende tips

• Zorg ervoor dat u het HTML5-doctype () gebruikt, zodat uw HTML wordt gevalideerd
• Bekijk de beschikbare attributen voor het element om te zien welke andere opties u aan uw element kunt toevoegen.
• Houd er rekening mee dat we de HTML standaard instellen op besturingselementen en dat autoplay is uitgeschakeld. Je kunt dat natuurlijk veranderen, maar onthoud dat veel mensen een geluid vinden dat automatisch wordt gestart / dat ze niet kunnen controleren om op zijn best vervelend te zijn, en vaak de pagina gewoon verlaten wanneer dat gebeurt.