Kogu selle postituse jooksul saate teada, kuidas ise luua HTML -pleier; puhaste koodide põhjal. Seega ei pea te ühtegi programmi alla laadima ja saate seda kasutada nii võrgus kui ka väljaspool seda.
HTML -pleier
Praegu leiate veebi sirvides sadu spetsiaalseid programme muusika (või mis tahes tüüpi heli) esitamiseks; mõned paremad kui teised ja seega rohkemate valikute ja ka rohkemate alternatiividega. Siiski on võimalik, et me ise saame koodide abil luua oma HTML -pleier; muidugi, et see on üsna lihtne, kuid täidab oma ülesannet.
Selle ülesande täitmiseks ei pea te olema kodeerimise ja programmeerimise asjatundja, sest tõde on see, et seda on üsna lihtne teha ja see on väga lihtne.
Mis on HTML?
Enne artikli enda sisuga alustamist usume, et on väga oluline, et teate natuke, mis on HTML; midagi, mida olete ilmselt mingil hetkel kuulnud mainimist või lugemist.
HTML, tähendab Hüperteksti märgistuskeel; mis on koodikeel, mida kasutatakse veebilehtede arendamiseks. Täpsemalt öeldes aitab kood meil koguda kogu teavet, andmeid, multimeediasisu, teksti ja palju muud; Disaini ja stiili osas jääb see CSS -i, teise koodikeele poole.
Seda artiklit lugedes teate, et seda tehakse sama HTML -i keelt kasutades; Veebibrauserid, nagu Chrome, Microsoft Edge ja teised, vastutavad selle koodi "tõlkimise" eest, et näidata meile lehe tavalist sisu. Selgema ettekujutuse saamiseks võite kohe oma Chrome'i brauseris proovida järgmist otseteed: Ctrl + Tõstuklahv + I; see avab arendaja tööriista ja näete, kuidas veebileht tegelikult välja näeb, kui seda ei tõlgita.
Tehes juba lühidalt selgeks, mis on HTML -kood; nüüd näitame, kuidas seda luua muusikapleier.
Muusikamängija HTML -is, koodid
Kui soovite näha, kuidas muusikamängija veebibrauseris välja näeb, proovige lohistada brauseris olev lugu; näete, et see hakkab seda mängima ja näitab teile peamisi kontrollereid.
Nagu me teile ütlesime, on see midagi üsna lihtsat, millel on lihtsalt nupp mängima/paus, aja navigaator, aeg numbrites ja helitugevuse regulaator. Põhimõtteliselt on kõigil teistel brauseritel sarnane disain.
See aitab teid palju, kui loote juhuslikult oma veebilehe ja / või ajaveebi ning teil on vaja heli lisada; kuigi siiski on võimalik, et saate selle endale luua. Soovitame teil abiks olla veebilehtede arendusprogramm, kuigi samade ajaveebi märkmetega see aitab.
Mängija sisestamise kood
Kui olete oma veebilehe sisu HTML5 -ga saanud; Kood, mis võimaldab teil lihtsa mängija sisestada, on järgmine:
<audio src="../music/woman.mp3" controls="controls" type="audio/mpeg" preload="preload">
</audio>Silt " »Kas see, mis võimaldab meil oma rada tutvustada, on teatud atribuudid. Sel juhul SRC, on kausta aadress, kus asub meie muusika; the Juhtimine, on see, mis näitab meile lihtsat juhtpaneeli; the Eellaadimine, on faili puhverlaadimine, et vältida selle ummistumist ja lõpuks Autoplay, mis võib olla vabatahtlik, kuna see muudab meie raja automaatselt alguse.
Eelmised atribuudid, on vaja, et need oleksid olemas, nii et meie HTML -pleier, töötab optimaalselt.
Kui teile see arvutimaailma osa meeldib ja olete sellest väga huvitatud, siis kõik, mis on seotud koodide, programmeerimise ja muuga; Selle ja teiste koodikeelte kohta lisateabe saamiseks külastage järgmist artiklit. Millist programmeerimiskeelt õppida?
Muusikaloendi loomise kood
Eelmises osas nägime lihtsalt, mis kood oli mängija sisestamiseks, kindla tee või õigemini konkreetse heliga; nii et see ei mängi ühtegi teist laulu peale selle, mille olete valinud atribuudi «src» jaoks; nii et kui soovite uut lugu, peaksite uue kausta aadressi paigutamiseks minema lähtekoodi juurde ja muutma atribuudi aadressi või isegi sisestama teise mängija.
Siiski on võimalik sisestada teine kood, kuid seekord Javascripti kaudu, mis võimaldab teil sisestada a playlist, et saaksite ise luua.
Samad programmid või samas märkmete ajaveebis võimaldavad teil seda uut koodikeelt tutvustada. Teie jaoks luuakse kast koos laulude loendiga, milles saate klõpsuga valida selle, mida soovite hetkel kuulata; saate nimekirja panna nii palju laule kui soovite, sest sellel pole piiranguid.
Vajalik Javascripti lähtekood, et saaksite ise luua playlist ja jookse oma peale HTML -pleier; on järgmine:
<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>Oluline on, et iga nähtava „valiku” märgendi puhul sisestaksite muusika aadressi koos selle nimega, nagu eelmises näites; kuna heli esitamisel võib tekkida tõrge.
Allpool olevas videos näete graafilisemalt kõike, mida selles artiklis selgitame, kui teil on kahtlusi. Lisaks saate seda ja palju muud kohandada, kasutades keerukamaid koode ja programmeerimiskeeli.