skabe tilpassede html5 lyd spiller,,,,,,, under denne forelæsning, kommer jeg til at præsentere dig for html5 audio - og vise dem, hvordan de kan skabe deres egen spiller.,,,, indførelse af et web - indtil nu i projektet har været en langsommelig proces er stærkt afhængige af tredje part plugins sådanne flash.da iphonen er berygtet manglende accept af stik af og den nyhed, at adobe vil ikke længere støtte flash for mobile, mange udviklere ser på andre måder at optage lyd i deres projekter.det er, hvor html5 audio skridt til at løse problemet. html5 giver, selv om en standard for at spille lydfiler på nettet, det stadig er i sin vorden og har stadig lang vej at gå, før den kan give alt det, andre plugins som flash audio giver.men i de fleste tilfælde, det er mere end tilstrækkelige.,, simpelt html5 lyd, er den nemmeste måde at gennemføre lyd i en hjemmeside med html5 er at anvende den nye audio - mærke.føj det til din html5 dokument med følgende kode:, < audio kontrol = "kontrol" > < kilde src = "spor. ogg" type = "audio /ogg" /> < kilde src = "spor. mp3 -" type = "audio /mpeg -" /> deres browser støtter ikke den lyd element.< //>,, hvis du tager et kig på den kode ovenfor, kan man se, at jeg har erklæret, < audio >, mærke og definerede kontroller attribut, så vi kan se den misligholdelse, kontrol af den aktør, satte sig i, < audio > og, vi har 2 src 'hundetegn.en definition af en mp3 - spor og andre definerer ogg format.den ogg format er især bruges til at lade musikken spille i firefox som følge af licenser spørgsmål firefox ikke støtter mp3 - uden at bruge et stik af.en kæde af tekst, din browser støtter ikke den lyd element., lader brugere med unsupporting browsere ved, hvad der foregår.,, misligholdelse html5 lyd spiller, html5 audio - attributter, samt støtte til global html5 attributter mærket støtter også et sæt attributter, enestående selv.,, autoplay, - der kan fastsættes til "ægte" blank "eller" at definere, om banen, automatisk skal spille, så snart den side er ladt.,, kontrol - som vist i ovenstående eksempel, den fastsætter, om den oprindelige kontrol, såsom "spille, pause" osv. der bør vises.,, loop, - der kan fastsættes til "loop" og fastlægger, om banen skal spille igen, når den er færdig, preload, - det kan fastsættes til "automatisk" (som beskriver, om sagen skalld belastning, så snart den side byrder), "metadata" (som beskriver om kun metadata, spor afsnit osv. skal være lastet), "ingen" (som kræver, at de browser bør ikke belastning filen når side belastning).,, src - denne kan også ses i eksemplet ovenfor, og definerer url af musik, der skal spilles af audio -, trækker det op til 11 i de seneste skridt, vi har set på det enkleste form for html5 lyd.når vi begynder at udnytte den audio - tagfat med javascript, kan vi begynde at skabe nogle meget interessante og nyttige audio - spillere.lad os se på, hvad jquery kan gøre for os.når vi har defineret nummer klar i jquery, kan vi skabe en ny lyd variabel til at holde vores lydfilen som simpelt:, var myaudio = nye lyd ('mysong. mp3 '); det er det.så når vi ønsker at udføre en handling på den lyd vi kan udløse det ved hjælp af variablen myaudio ".her er en liste over foranstaltninger, som vi kan tage med variabel.notér det, vi bruger nogle af dem på et senere tidspunkt i tut, når vi skaber vores lyd spiller... myaudio. play(); - det vil spille musik.myaudio. pause(); - det vil stoppe den musik.myaudio.duration; - afkast, længden af den musik spor.myaudio.currenttime = 0 - det vil omdirigere lyd fra begyndelsen.myaudio.loop = sandt. - det gør lydsporet loop.myaudio.muted = sandt. - det vil dæmpe den vej, hvis du vil have en funktion til at blive kaldt en gang lyden er færdig, så du kan bruge "myaudio. addeventlistener ('ended, myfunc) « - dette vil kalde" myfunc() når lyden er færdig.,, at html5 audio -, nu spiller: du har nogle baggrundsoplysninger om html5 audio - og forstår de grundlæggende principper, det er tid til at føre dem ud i praksis og skabe et skræddersyet html5 audio - spiller.går jeg glip af udformningen, så det er uden for rammerne af denne forelæsning, men du kan downloade, der ledsager kildekode og browse gennem psd for at få en idé om, hvordan den er sat sammen, toppen af dokument består af html5 doctype.bonderøve css nulstilling, google web skrifttype hummer til titlen.så har vi de seneste jquery og sædvane javascript fil js.js.fnally, vi har html5slider.js, som gør det muligt at vise html5 input firefox type interval, som vi vil bruge til audio vådskrubber. <!doctype html > < head > < afsnit > html5 audio tutorielle < /afsnit > < forbindelse rel = "stylesheet" type = "tekst /css" href = "http: //yui. yahooapis. kom /3.3.0 /bygge /cssreset /reset-min.css" > < forbindelse href = http://fonts.googleapis.com/css?familie = hummer "rel ='stylesheet type ='text /css" > < forbindelse rel = "stylesheet" type = "tekst /css" href = "css /stil. css" > < manuskript src = "http://code.jquery.com/jquery-latest.js" type = "tekst /javascript" > < /manuskript > < manuskript type = "tekst /javascript" src = "j 'er /er. er" > < /manuskript > < manuskript type = "tekst /javascript" src = "js /html5slider. er" > <. /manuskript > < /head > efter h1 afsnit, jeg har skabt en div med en klasse "containere" og "fald".jeg har oprettet en særskilt klasse af gradient, da dette kan genanvendes på nogle andre elementer.i. "beholder" jeg har tilføjet et billede (som vil blive det album), så de tre anker mærker vil fungere som kontrol af spiller.Between them you'll find the scrubber/HTML5 range input field., <body> \t<h1>HTML 5 Audio Player</h1> \t<div class="container gradient"> \t\t \t\t<img class="cover" src="images/cover.jpg" alt=""> \t\t<div class="player gradient"> \t\t\t<a class="button gradient" id="play" href="" title=""></a> \t\t\t<a class="button gradient" id="mute" href="" title=""></a> \t\t \t\t\t\t<input type="range" id="seek" value="0" max=""/> \t \t\t\t<a class="button gradient" id="close" href="" title=""></a> \t\t\t \t\t</div><!- spiller - > < /div > <!- /container - > < /organ > < /html >,, at html5 audio - styles, snarere end at gennemgå alle aspekter af css, jeg vil give dig et overblik over og en note bestemte dele, at du måske havde lyst til at være opmærksom på. i kodeksen under, jeg har skabt den stigning i den aktør, der er fremkommet ved denne css gradient redaktør.jeg har derefter skabt aktør ". beholder" med en css3 overgange. du kan se, har jeg også brugt css3 rubrik størrelsessortering attribut, der skal "grænse boks.dette giver mulighed for at 10px polstring omkring den beholder, der skal indgå i den bredde, som jeg har angivet, i dette tilfælde 427px.hvis jeg ikke havde brugt det polstringen bør tilføjes til de 427px, at beholderen er større end jeg faktisk ønsker det.det er blevet almindelig praksis i disse dage at anvende * {æske størrelsessortering: grænse boks), som giver en mere intuitiv måde på vej. jeg har også tilføjet nogle css3 overgange ". coverlarge" for at give mulighed for en god overgang, når de spiller første åbner.The CSS may look a little overwhelming at first, but a lot of it is specific browser prefixes to ensure that the audio player looks and works the same across different browsers., .gradient { \tborder: 1px solid black; \t-webkit-box-shadow: inset 0 1px 0px rgba(255,255,255,.2); \t-moz-box-shadow: inset 0 1px 0px rgba(255,255,255,.2); \tbox-shadow: inset 0 1px 0px rgba(255,255,255,.2); \tbackground: #494949; /* Old browsers */ background: -webkit-linear-gradient(top, #494949 0%, #434242 31%, #393838 55%, #242323 83%, #1b1a1a 100%, #161515 100%, #0b0b0b 100%); \tbackground: -moz-linear-gradient(top, #494949 0%, #434242 31%, #393838 55%, #242323 83%, #1b1a1a 100%, #161515 100%, #0b0b0b 100%); \tbackground: -o-linear-gradient(top, #494949 0%, #434242 31%, #393838 55%, #242323 83%, #1b1a1a 100%, #161515 100%, #0b0b0b 100%); \tbackground: -ms-linear-gradient(top, #494949 0%, #434242 31%, #393838 55%, #242323 83%, #1b1a1a 100%, #161515 100%, #0b0b0b 100%); \tbackground: linear-gradient(top, #494949 0%, #434242 31%, #393838 55%, #242323 83%, #1b1a1a 100%, #161515 100%, #0b0b0b 100%); /* W3C */ -image filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#494949', endColorstr='#0b0b0b',GradientType=0 ); /* IE6-9 */ } .container { \t-webkit-transition: all .7s ease; \t-moz-transition: all .7s ease; \t-o-transition: all .7s ease; \t-ms-transition: all .7s ease; \ttransition: all .7s ease; \tposition: absolute; \twidth: 427px; \theight: 70px; \t-webkit-border-radius: 10px; \t-moz-border-radius: 10px; \tborder-radius: 10px; \t-webkit-box-shadow: 0px 0px 13px rgba(0,0,0,.3),inset 0 1px 0px rgba(255,255,255,.2); \t-moz-box-shadow: 0px 0px 13px rgba(0,0,0,.3),inset 0 1px 0px rgba(255,255,255,.2); \tbox-shadow: 0px 0px 13px rgba(0,0,0,.3),inset 0 1px 0px rgba(255,255,255,.2); \ttop: 50%; \tleft: 50%; \tmargin: -214px 0px 0px -214px; \tpadding: 10px; \t-webkit-box-sizing: border-box; \t-moz-box-sizing: border-box; \t-ms-box-sizing: border-box; \tbox-sizing: border-box; } .containerLarge { \theight: 427px; } .cover { \t-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; \tfilter: alpha(opacity=0); \topacity: 0; \twidth: 398px; \theight: 10px; \tborder: 2px solid black; \t- webkit grænse radius: 5px; - moz grænse radius: 5px; grænseoverskridende radius: 5px; - webkit rubrik skygge: indpresningsdybde 0px 5px 5px rgba (0,0,0,1); - moz rubrik skygge: indpresningsdybde 0px 5px 5px rgba (0,0,0,1) rubrik skygge: indpresningsdybde 0px 5px 5px rgba (0,0,0,1)}. coverlarge {- fru filter: "progid: dximagetransform. microsoft. alfa (uklarhed = 100)" filter: alfa (uklarhed = 100); uklarhed: 1. højde: 398px; - webkit overgang: uklarhed. 7s lette; - moz overgang: uklarhed. 7s lette; - o-transition: uklarhed. 7s lette; - ms overgang: uklarhed. 7s lette; overgangen: uklarhed. 7s lette; - webkit overgang forsinkelse:. 5s; - moz overgang forsinkelse:. 5s) - o-transition-delay:. 5s. - fru overgang forsinkelse:. 5s; overgangen forsinkelse:. 5s.}, hvor den lyd spiller, bør læokay, på dette tidspunkt, når beholderen til aktør er fuldført, er det tid at skabe den faktiske kontrol.de fleste af de knapper har skabt ved hjælp af css nisser, desværre er endnu ikke støtte html5 vifte input, så jeg har besluttet ikke at vise de audio - skrubber til er brugere.hvis du er i en position, hvor det ikke er acceptabelt, kan du bruge den jquery ui slider på samme måde som den metode, som jeg har brugt.jeg har valgt at skjule vådskrubber dermed input (display: ingen. 9.vigtige;} denne grundlæggende huder input fra ie brugere (se denne tråd på stak over for mere information om, (9). problemet med html5 vifte med en er, at kun nogle få browsere støtte skik - for det, især webkit browsere (krom og safari).opera og firefox vil kun vise en standard range slider, desværre.hvis du har brug for skik på vej på tværs af alle browsere så kan du bruge den jquery ui slider som nævnt tidligere.kan du se den skik på vej til webkit browsere i, input: - webkit en tommelfinger, tilskriver.,. spiller {- webkit rubrik størrelsessortering: grænse boks - - box størrelsessortering: grænse boks. - fru rubrik størrelsessortering: grænse boks; rubrik størrelsessortering: grænse boks. position: absolut; bredde: 300px; nederst: 10px; bredde: 95%; - webkit grænse radius: 3px; - moz grænse radius: 3px; grænseoverskridende radius: 3px; polstring: 5px;}. knap (display: blok; bredde: 34px. højde: 34px; baggrund billede: url (.. /images /sprite. men heller ikke dér er menneskene sikre; baggrund gentager - nr.: flyde: venstre margen. 5px;}&#spille {baggrund holdning: 6px 5px;}&#pause {baggrund holdning: - 32px 5px;}&#stum {baggrund holdning: - 63px 5px;}&#afdæmpet (background-position: - 106px 5px;} bidrag [type = "aktionsradius"] (bredde: 250px; margen top. - 5px;}&#tæt {flyde: ret; baggrund holdning: - 146px 5px; display: ingen;}. bind (holdning: absolutte, højde: 100px; bredde: 34px; grænse: 1px fast sort baggrund farve:𻊓 top. - 97px; display: ingen;} input (display: ingen. 9.vigtige;} bidrag [type = "aktionsradius"] {- webkit udseende: ingen; grænse: 1px fast sort holdning: absolutte, top. 18px; display: blok; bredde: 63%, højde: 15px; - webkit grænse radius: 20px; - moz grænse radius: 20px; grænseoverskridende radius: 20px; baggrund farve:𻊓 tilbage: 90px; - webkit rubrik skygge: indpresningsdybde 0px 4px 4px rgba (0,0,0,. 6); - moz rubrik skygge: indpresningsdybde 0px 4px 4px rgba (0,0,0,. 6); rubrik skygge: indpresningsdybde 0px 4px 4px rgba (0,0,0,. 6);} input: - webkit en tommelfinger {- webkit udseende: ingen; bredde: 20px. højde: 20px; grænse: 1px fast sort - webkit grænse radius: 10px; grænseoverskridende radius: 10px; baggrund:Pe4df; /* gamle browsere * /baggrund: - webkit lineær gradient (top,Pe4df 0%,Kdbd6 13.%,ec4bf 33%,9bbb6 47%,ƣd99 80%,źf8b 100%); baggrund: - moz lineær gradient (top,Pe4df 0%,Kdbd6 13%,ec4bf 33%,9bbb6 47%,ƣd99 80%,źf8b 100%); baggrund: - o-linear-gradient (top,Pe4df 0%,Kdbd6 13%,ec4bf 33%,9bbb6 47%,ƣd99 80%,źf8b 100%); baggrund: lineær gradient (top,Pe4df 0%,Kdbd6 13%,ec4bf 33%,9bbb6 47%,ƣd99 80%,źf8b 100%) /* w3c * /}, at html5 audio - jquery, når design og - har gjort, det er tid til at foretage de spiller faktisk komme til live.vi kan gøre dette ved hjælp af de javascript ramme jquery.når jquery, nummer klar, er blevet erklæret, at vi skaber nogle variabler, inden for hvilke vi kan opbevare vores jquery objekter., beholder = $(.) '), omfatter = $(.'); spille = $('# spille "); - = $('&#pause"); stum = $('# stum "); afdæmpet = $('&#afdæmpet) tæt = $('# tæt på"); sang = nye lyd ('music /track1. ogg,'music /track1. mp3'); varighed = sang. varighed, i "sang" variabel ovenfor, kan man se, at vi har erklæret to spor.den ogg firefox og mp3 - format for andre browsere.jeg vil skabe en betinget, hvis udtalelse, således at vi kan kontrollere, om de browser kan spille mp3 eller ej.hvis det kan, så gør vi det "sang" variabel kilde mp3 - spor - - hvis ikke, så vil det spille "ogg format. hvis (sang. canplaytype ('audio /mpeg -; ')) (sang. type =' audio /mpeg" sang. src = "musik /track1. mp3 - ') andet (sang. type =' audio /ogg" sang. src = "musik /track1. ogg '}, den næste ting, vi skal skabe, er klik funktioner, som vil gøre det muligt for os at spille op for musikken.jeg bruger den lyd, play(), til at begynde med lyden, så brug den jquery metode, replacewith, som grundlæggende erstatter play knappen på pauseknappen. jeg har også tilføjet et "coverlarge" og "containerlarge" klasser "containere" og "omfatter".som jeg har tilføjet css3 overgange til disse tidligere på css dette vil tilføje en god overgang, når lyden begynder at spille."pause" funktion virker på samme måde, men uden ændringer.When clicked, it replaces the pause button with the "play" button., play.live('click', function(e) { \t\te.preventDefault(); \t\tsong.play(); \t\t$(this).replaceWith('<a class="button gradient" id="pause" href="" title=""></a>'); \t\tcontainer.addClass('containerLarge'); \t\tcover.addClass('coverLarge'); \t\t$('#close').fadeIn(300); \t\t$('#seek').attr('max',song.duration); \t}); \tpause.live('click', function(e) { \t\te.preventDefault(); \t\tsong.pause(); \t\t$(this).replaceWith('<a class="button gradient" id="play" href="" title=""></a>'); \t});,The mute and muted buttons work similarly to the play and pause buttons, but call the related actions and replace the buttons with the appropriate alternatives., mute.live('klik på "funktion (e) (f. preventdefault(); song.volume = 0 $(det). replacewith (< en klasse =" knap gradient "id =" begrænset "href =" "afsnit =" > < /a > ');}); afdæmpet. bor ('click, funktion (e) (f. preventdefault(); song.volume = 1 $(det). replacewith (< en klasse = "knap gradient" id = "mute" href = "" afsnit = "> < /a >')}), når brugeren klik" tæt på "knap, vi kalder jquery at fjerne" containerlarge "og" coverlarge "klasser.dette vil skjule dækning og lukke spiller igen.vi stopper spilleren ved at, pause(), handling og nulstille audio - currenttime til lig 0.det er sporet tilbage til begyndelsen. $('# tæt). klik (funktion (e) (f. preventdefault(); beholder. removeclass ('containerlarge). removeclass ('coverlarge) sang. pause(); song.currenttime = 0 $('&#pause "). replacewith (" - lt; en klasse = "knap gradient" id = "spille" href = "" afsnit = "> < /a > '); $('&#tæt på"). fadeout (300)}), nu er det tid til at komme ind på det audio - skrubber -, som har fået et id "forsøge".den første opgave er at gøre det muligt for os at flytte vådskrubber til enhver del af lyd.dette gøres ved at påvise en ændring, når nogen flytter skrubning.vi må sætte song.currenttime svarer til den del af den sang, som tillige er flyttet.- satte vi også max attribut til at afspejle den sang varighed. $("# søge"). bind ("ændring", function() {song.currenttime = $(det). val(). $("# søge"). attr ("max" sang. varighed)}); den sidste del i jquery er at gøre "# søge" vådskrubber flytte sammen med varigheden af den lyd.vi gør dette ved at tilføje en begivenhed til at lytte til det, og når de audio - tid opdateringer, vi kalder funktion.jeg satte en variabel "curtime" for at få de nuværende songtime.jeg så opdatere værdien af skrubber - til at afspejle den aktuelle tid holdning af lyd, sang. addeventlistener ('timeupdate, funktion () (curtime = parseint (song.currenttime, 10); $("# søge"). attr ("værdi", curtime)}), og der har du det!en html5 lyd spiller, at man kan gennemføre på deres område eller app.,, konklusioner, som tidligere nævnt, html5 audio - stadig er i sin vorden og har stadig plads til forbedringer.på det tidspunkt, hvor den lyd er konstrueret til musik, og vil derfor altid å lyd fra serveren, som resulterer i en browsere har problemer med alt, hvad der er sket.det er ikke altid et problem, men det betyder bare, at det vil begynde at betale før audio fuldt ud har downloadet. det kan være et problem, hvis du ønsker at bruge html5 lyd for sådanne ting som sund virkninger på spil, eller lyd, intensive programmer.derfor er vores venner på google har fundet en måde at forbedre den lyd du svagheder.google har opbygget og fremsætte forslag til w3c til "web audio api".det viser sig at være meget mere magtfuld end indfødte html5 lyd, men problemet er, at det på dette stadium (kan du gætte det?!), det virker kun i krom. du kan læse mere om google er web audio api - og se nogle eksempler på google kode eller tjek nettet audio - specifikation, jeg håber du har nydt at lære om html5 lyd, og hvordan de kan skabe deres egne aktører.min spiller omfatter grundlæggende kontrol, men der er ikke noget at stoppe dig at tilføje flere elementer såsom mængde kontrol, og selv med din egen skik tegnefilm.med en lille smule eftertanke og eksperimenter du virkelig kan skabe en god lyd spillere.download kildekoden, og jeg ser frem til at se, hvad der sker med!,