Hoe kan ik een MP3-speler met HTML Embed

Audio online is eenvoudig met HTML5 . sendmusic afbeelding van Giovanni Cardinali van Fotolia.com

MP3-spelers zijn een populaire functie op vele websites.Ze kunnen elke vorm van audio-content af te spelen online, van muziek tot poëzie podcasts.Velen gebruiken Shockwave Flash (SWF) applicaties om de MP3-bestanden af ​​te spelen.Inbedding Flash MP3-spelers in webpagina's gebruikt complex in traditionele HTML (HyperText Markup Language) te zijn.De introductie van HTML-versie 5 maakte het proces veel gemakkelijker dankzij een vereenvoudigde versie van de "embed" element.

wat je nodig hebt

  • tekst editor
  • webbrowser
  • Flash MP3-speler
  • MP3-bestand

instructies

  1. Kies uw MP3-speler.Veel freeware en open source-opties zijn beschikbaar voor download op het web.Voor dit voorbeeld, kies een Flash MP3-speler die HTML5's "embed" element gebruikt en volg de bijbehorende documentatie zorgvuldig.

  2. Maak een HTML5-bestand.Open een nieuw document in uw tekstverwerker en maak een eenvoudige

    HTML5 pagina met behulp van deze code.

    & lt;! Doctype html & gt;
    & lt; html & gt;
    & lt; head & gt;
    & lt; meta charset = "UTF-8" / & gt;
    & lt; title & gt; / title & gt; Hoe een MP3-speler met HTML & lt Embedden;
    & lt; / head & gt;
    & lt; body & gt;

    & lt; / body & gt;
    & lt; / html & gt;

    Sla het bestand op als "mp3-player.html."

  3. Voeg een HTML5 "embed" element.Zet deze simpele code in uw HTML-gedeelte "body", de "myFlashMP3Player.swf" waarde vervangen door de file-naam van uw eigen Flash MP3-speler.

    & lt; embed src = "myFlashMP3Player.swf" / & gt;

    Na de documentatie van uw MP3-speler zorgvuldig, het toevoegen van extra vereiste code (meestal, dit kan enkele JavaScript).Sla uw bestand opnieuw.

  4. Test uw webpagina.Open uw webbrowser en laad "mp3-player.html."Moet u uw MP3-speler ingebed in de webpagina te zien.Zo niet, controleer dan of u de codevoorbeelden correct gekopieerd en dat u de documentatie van uw MP3-speler hebben gevolgd.

Tips & amp;Waarschuwingen

  • De snelste manier om deze code voorbeeld werkend te krijgen is om het te testen met een simpele Flash-animatie-bestand (SWF) in plaats van een MP3-speler.Zodra je dat werken, zal het gemakkelijker zijn om eventuele fouten die u zou kunnen maken in het volgen van het coderen van de instructies van uw MP3-speler te identificeren.
  • In tegenstelling tot sommige van de andere multimedia HTML5-functies, de 'embed' element is goed ondersteund door de belangrijkste webbrowsers vanaf het begin.Hoewel het vereist het gebruik van een Flash-player (bijvoorbeeld), meer van de oudere webbrowsers begrijpen dan HTML5's "audio" element.
  • HTML5 kun je nog steeds traditionele methoden van multimedia inbedding van de "object" element (zoals JavaScript methode SWFObject's) gebruiken.Echter, het gebruik ervan is moeilijker dan het gebruik van HTML5 "embed" element.
  • Dit voorbeeld toont de basisprincipes van Flash inbedding in HTML5.Het heeft geen betrekking op de complexe methoden voor het gebruik van de oudere "object" element.Heeft het voorbeeld met MP3-spelers ontworpen voor oudere versies van HTML of het 'object' methode niet gebruiken.
  • Als een web-browser niet reeds hebben de Flash-plugin geïnstalleerd, HTML5's 'embed' element niet automatisch leiden het naar download pagina van de plugin.Aangezien de meeste web-gebruikers al Flash geïnstalleerd in hun browser, dit is normaal geen probleem.Als dat zo is zorg je, JavaScript oplossingen beschikbaar (zoals SWFObject).

Resources

  • W3Schools.com: JavaScript Tutorial
  • Google Code: SWFObject
  • Adobe.com: Adobe Flash Player (browser plugin)
405
0
1
Webontwikkeling