Sådan Integrer en MP3-afspiller med HTML

Online Audio er nemt med HTML5 . sendmusic billede af Giovanni Cardinali fra Fotolia.com

MP3-afspillere er en populær funktion på mange websteder.De kan spille alle slags lydindhold online, fra musik til poesi på podcasts.Mange bruger Shockwave Flash (SWF) applikationer til at spille MP3-filerne.Indlejring Flash MP3-afspillere på websider, der bruges til at være kompleks i traditionel HTML (Hypertext Markup Language).Introduktionen af ​​HTML-version 5 gjorde processen meget lettere takket være en forenklet version af "embed" element.

hvad du har brug

  • Tekst editor
  • webbrowser
  • Flash MP3-afspiller
  • MP3-fil

Instruktioner

  1. Vælg din MP3-afspiller.Mange freeware og open source-indstillinger er tilgængelige for download på nettet.I dette eksempel skal du vælge en Flash MP3-afspiller, der bruger HTML5 s "embed" element, og følg dens dokumentation omhyggeligt.

  2. Opret en HTML5-fil.Åbn et nyt dokument i din tekst editor og lave en grundlæggende HTML5 side ved hjælp af denne kod

    e.

    & lt;! DOCTYPE html & gt;
    & lt; html & gt;
    & lt; head & gt;
    & lt; meta charset = "utf-8" / & gt;
    & lt; title & gt; Sådan Embed en MP3-afspiller med HTML & lt; / title & gt;
    & lt; / head & gt;
    & lt; body & gt;

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

    Gem din fil som "mp3-player.html."

  3. Tilføj en HTML5 "embed" element.Put denne simple kode i din HTML "krop" sektionen, erstatter den "myFlashMP3Player.swf" værdi med filen-navnet på din egen Flash MP3-afspiller.

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

    Efter din MP3-afspiller dokumentation omhyggeligt, tilføjer nogen ekstra krævede kode (typisk, det kunne være nogle JavaScript).Gem din fil igen.

  4. Test din webside.Åbn din webbrowser og indlæse "mp3-player.html."Du bør se din MP3-afspiller indlejret i websiden.Hvis ikke, skal du kontrollere, at du har kopieret koden eksempler korrekt, og at du har fulgt din MP3-afspiller dokumentation.

Tips & amp;Advarsler

  • Den hurtigste måde at få denne kode eksempel arbejdsmiljø er at teste den med en simpel Flash-animation-fil (SWF) snarere end en MP3-afspiller.Når du har at arbejde, vil det være lettere at identificere eventuelle fejl, du kan gøre i at følge din MP3-afspillerens kodning instruktioner.
  • modsætning til nogle af HTML5 andre multimediefunktioner, dens "embed" elementet er blevet godt understøttet af de store webbrowsere fra starten.Selvom det kræver hjælp af en Flash player (for eksempel), flere af de ældre webbrowsere forstår det end HTML5 er "lyd" element.
  • HTML5 stadig lader dig bruge traditionelle metoder til multimedie indlejring med "objekt" element (såsom SWFObject JavaScript metoden).Men ved hjælp af dem er sværere end at bruge HTML5 er "embed" element.
  • Dette eksempel viser det grundlæggende i Flash indlejring i HTML5.Den dækker ikke de komplekse metoder til at bruge den ældre "objekt" element.Du må ikke bruge eksemplet med MP3-afspillere designet til ældre versioner af HTML eller "objekt" metode.
  • Hvis en web-browser ikke allerede har Flash-plugin installeret, HTML5 s "embed" element giver ikke automatisk lede den til plugin download side.Men da de fleste web-brugere allerede har Flash installeret i deres browsere, det er ikke normalt et problem.Hvis den gør bekymring dig, JavaScript løsninger er tilgængelige (såsom SWFObject).

Ressourcer

  • W3Schools.com: JavaScript Tutorial
  • Google Code: SWFObject
  • Adobe.com: Adobe Flash Player (browser-plugin)
658
0
1
Web Development