Gjennom dette innlegget lærer du hvordan du lager ditt eget HTML -musikkspiller; basert på rene koder. Dermed trenger du ikke å laste ned noe program, og du vil kunne bruke det både online og offline.
HTML -musikkspiller
For tiden kan du finne hundrevis av spesialiserte programmer for å spille musikk (eller hvilken som helst type lyd) ved å surfe på nettet; noen bedre enn andre og dermed med flere alternativer og også flere alternativer. Imidlertid er det mulig at vi selv, ved bruk av koder, kan lage våre egne HTML -musikkspiller; selvfølgelig, at det er ganske enkelt, men at det fyller sin funksjon.
Du trenger ikke å være ekspert på koding og programmering for denne oppgaven, siden sannheten er, det er noe ganske enkelt å gjøre og veldig enkelt.
Hva er HTML?
Før vi begynner med innholdet i selve artikkelen, mener vi at det er veldig viktig at du vet litt om hva HTML er; noe du sikkert har hørt nevnt eller lest om på et tidspunkt.
HTML betyr HyperText Markup Language; som er et kodespråk som brukes for utvikling av nettsider. Nærmere bestemt er det koden som hjelper oss å samle all informasjon, data, multimediainnhold, tekst og mye mer; når det gjelder design og stil, forblir det fra CSS, et annet kodespråk.
Når du leser denne artikkelen, vil du vite at det er gjort med det samme HTML -språket; nettlesere som Chrome, Microsoft Edge og andre, er ansvarlige for å "oversette" denne koden for å vise oss det vanlige innholdet på siden. For å gi deg en klarere ide, kan du prøve følgende snarvei akkurat nå fra Chrome -nettleseren din: Ctrl + Shift + I; dette åpner utviklerverktøyet, og du vil se hvordan en webside faktisk ser ut hvis den ikke er 'oversatt'.
Allerede tydelig og kortfattet hva HTML -koden er; nå viser vi hvordan du lager din musikkspiller.
Musikkspiller i HTML, koder
For å se hvordan en musikkspiller ser ut i en nettleser, kan du prøve å dra et spor du har inne i nettleseren. du vil se at den vil begynne å spille den og vise deg hovedkontrollerne.
Som vi fortalte deg, er det noe ganske enkelt, som bare vil ha knappen Spille/pause, tidsnavigatoren, tiden i tall og volumkontrollen. I utgangspunktet har alle andre nettlesere et lignende design.
Dette vil hjelpe deg mye, hvis du tilfeldigvis oppretter din egen webside og / eller en blogg, og du trenger å sette inn en lyd; selv om det fortsatt er mulig at du kan lage det selv. Vi anbefaler at du har et webutviklingsprogram for å hjelpe deg, men det vil gjøre det med de samme bloggnotatene.
Kode for å sette inn spilleren
Når du har hoveddelen av websiden din med HTML5; Koden som lar deg sette inn den enkle spilleren vil være denne:
<audio src="../music/woman.mp3" controls="controls" type="audio/mpeg" preload="preload">
</audio>Merkelappen " »Er det som vil tillate oss å introdusere sporet vårt, i seg selv, vil det være visse attributter. I dette tilfellet, SRC, er adressen til mappen der musikken vår ligger; de Kontroller, er den som vil vise oss det enkle kontrollpanelet; de Forhåndslast, er bufferinnlasting av filen, for å forhindre at den setter seg fast og til slutt Autoplay, som kanskje er valgfritt, ettersom dette får sporet til å starte automatisk.
De tidligere attributtene, det er nødvendig at de er tilstede, slik at våre HTML -musikkspiller, fungerer optimalt.
Hvis du liker og er veldig interessert i denne delen av dataverdenen, alt som har med koder, programmering og andre å gjøre; Du kan besøke følgende artikkel for å begynne å lære mer om dette og andre kodespråk: Hvilket programmeringsspråk skal du lære?
Kode for å lage en musikkliste
I forrige seksjon så vi akkurat hva koden var for å sette inn en spiller, med en spesifisert bane, eller rettere sagt, med en bestemt lyd; så dette vil ikke spille noen annen sang enn den du har valgt for «src» -attributtet; så hvis du vil ha et annet spor, må du gå til kildekoden og endre adressen til attributtet eller til og med skrive inn en annen spiller for å plassere den nye adressen til mappen.
Det er imidlertid mulig å skrive inn en annen kode, men denne gangen fra Javascript, som lar deg skrive inn en spilleliste, slik at du kan lage din egen.
De samme programmene eller i den samme notabloggen lar deg introdusere dette nye kodespråket. En boks vil bli opprettet for deg, med en liste over sanger, der du ved hjelp av et klikk kan velge den du vil lytte til for øyeblikket; du kan sette på listen, så mange sanger du vil, for det er ingen grenser i den.
Den nødvendige Javascript -kildekoden for å kunne lage din egen spilleliste og løp på din HTML -musikkspiller; er følgende:
<script>
function cambiarTrack(track) {
var path = track.getAttribute("path")
viejo_audio = document.getElementById("reproductor")
audio_padre = viejo_audio.parentNode
audio_padre.removeChild(viejo_audio)
nuevo_audio = document.createElement("audio")
nuevo_audio.setAttribute("id","reproductor")
nuevo_audio.setAttribute("controls", "controls")
// nuevo_audio.setAttribute("autoplay", "autoplay")
source = document.createElement("source")
source.setAttribute("src", path)
source.setAttribute("type", "audio/mpeg")
source.setAttribute("id", "reproductorSource")
nuevo_audio.appendChild(source)
audio_padre.appendChild(nuevo_audio)}
function cargarReproductor() {
var select = document.getElementById("selectTrack")
var path = select.options[0].getAttribute("path")
nuevo_audio = document.createElement("audio")
nuevo_audio.setAttribute("id","reproductor")
nuevo_audio.setAttribute("controls", "controls")
source = document.createElement("source")
source.setAttribute("src", path)
source.setAttribute("type", "audio/mpeg")
source.setAttribute("id", "reproductorSource")
nuevo_audio.appendChild(source)
padre = document.getElementById("reproductorBox")
padre.appendChild(nuevo_audio)
}
</script>
<div id="reproductorBox"></div>
<select id = "selectTrack" multiple onchange="cambiarTrack(this.options[this.selectedIndex]);">
<option path="../music/take-on-me.mp3">Ah Ah - Take on me</option>
<option path="../music/dust-in-the-wind.mp3">Kansas - Dust in the wind</option>
<option path="../music/how-deep-is-your-love.mp3">Bee Geees - How deep is your love</option>
</select>
<script>cargarReproductor();</script>Det er viktig at du i hver "opsjonskode" du ser, skriver inn adressen til musikken med navnet, som i forrige eksempel; siden det er mulig at det oppstår en feil når du spiller av lyden.
I den følgende videoen nedenfor vil du på en mer grafisk måte kunne se alt vi forklarer i denne artikkelen, i tilfelle du er i tvil. I tillegg til det kan du tilpasse det og mer ved å bruke mer komplekse koder og programmeringsspråk.