Šiame įraše galite sužinoti, kaip sukurti savo HTML muzikos grotuvas; remiantis grynais kodais. Tokiu būdu jums nereikės atsisiųsti jokios programos ir galėsite ją naudoti tiek prisijungę, tiek neprisijungę.
HTML muzikos grotuvas
Šiuo metu naršydami internete galite rasti šimtus specializuotų programų, skirtų muzikai (ar bet kokiam garso įrašui) leisti; kai kurie geresni už kitus, taigi ir daugiau galimybių bei alternatyvų. Tačiau gali būti, kad mes patys, naudodami kodus, galime susikurti savo HTML muzikos grotuvas; Žinoma, jis turėtų būti gana paprastas, bet turėtų atlikti savo funkciją.
Norėdami atlikti šią užduotį, jums nereikia būti kodų ir programavimo ekspertu, nes iš tikrųjų tai padaryti yra gana paprasta ir labai lengva.
Kas yra HTML?
Prieš pradedant nuo paties straipsnio turinio, manome, kad labai svarbu šiek tiek žinoti, kas yra HTML; kažkas, apie ką tikriausiai girdėjote paminėtą ar skaitėte.
HTML reiškia HyperText žymėjimo kalba; kuri yra kodinė kalba, naudojama tinklalapiams kurti. Tiksliau, tai yra kodas, kuris padeda mums surinkti visą informaciją, duomenis, daugialypės terpės turinį, tekstą ir daug daugiau; Kalbant apie dizainą ir stilių, tai palikta CSS, kitai kodo kalbai.
Skaitydami šį straipsnį žinosite, kad tai daroma ta pačia HTML kalba; Tokios žiniatinklio naršyklės kaip Chrome, Microsoft Edge ir kitos yra atsakingos už šio kodo „išvertimą“, kad parodytų mums įprastą puslapio turinį. Kad susidarytumėte aiškesnę idėją, galite išbandyti šį spartųjį klavišą dabar savo „Chrome“ naršyklėje: Ctrl+Shift+I; Taip bus atidarytas kūrėjo įrankis ir pamatysite, kaip iš tikrųjų atrodo tinklalapis, jei jis nėra „išverstas“.
Jau aiškiai, glaustai paaiškiname, kas yra HTML kodas; Dabar parodysime, kaip sukurti savo muzikos grotuvas.
Muzikos grotuvas HTML, kodai
Norėdami pamatyti, kaip muzikos grotuvas atrodo žiniatinklio naršyklėje, pabandykite nuvilkti turimą takelį į naršyklę; Pamatysite, kad jis pradės groti ir parodys pagrindinius valdiklius.
Kaip jau minėjome, tai gana paprastas dalykas, kuris tiesiog turės mygtuką Žaidimas/Pauzė, laiko navigatorius, laikas skaičiais ir garsumo valdiklis. Iš esmės visos kitos naršyklės turi panašų dizainą.
Tai jums labai padės, jei atsitiktinai kuriate savo svetainę ir/ar tinklaraštį ir jums reikės įterpti garso įrašą; Nors vis tiek gali būti, kad galite jį sukurti patys. Rekomenduojame turėti kokią nors interneto puslapių kūrimo programą, kuri jums padėtų, nors su tuo pačiu užrašų dienoraščiu ji veiks.
Kodas grotuvui įdėti
Kai turėsite savo tinklalapio turinį su HTML5; Kodas, leidžiantis įterpti paprastą grotuvą, bus toks:
<audio src="../music/woman.mp3" controls="controls" type="audio/mpeg" preload="preload">
</audio>Etiketė " » yra tai, kas leis mums patekti į savo trasą, joje bus tam tikri atributai. Šiuo atveju, SRC, yra aplanko, kuriame yra mūsų muzika, adresas; jis Kontrolė, yra tas, kuris parodys mums paprastą valdymo skydelį; jis Iš anksto įkelti, yra įkėlimas į failo buferį, kad jis neįstrigtų ir galiausiai Automatinis paleidimas, kuri gali būti arba nebūtina, nes dėl to mūsų takelis pradedamas automatiškai.
Ankstesni atributai turi būti, kad mūsų HTML muzikos grotuvas, dirbti optimaliai.
Jei jums patinka ir labai domitės šia kompiuterių pasaulio dalimi, viskas, kas susiję su kodais, programavimu ir kt.; Norėdami sužinoti daugiau apie šią ir kitas kodavimo kalbas, galite apsilankyti šiame straipsnyje: Kokią programavimo kalbą išmokti?
Kodas muzikos sąrašui sukurti
Ankstesniame skyriuje mes tiesiog matėme, koks yra kodas, skirtas įterpti grotuvą su nurodytu keliu, tiksliau, su konkrečiu garsu; todėl nebus grojama jokia kita daina, išskyrus tą, kurią pasirinkote atributui "src"; taigi, jei norite kito takelio, turėsite eiti į šaltinio kodą ir pakeisti atributo adresą arba net pristatyti kitą grotuvą, kad patalpintumėte naują aplanko adresą.
Tačiau galima įvesti ir kitą kodą, bet šį kartą Javascript, kuris leis įvesti a grojaraštis, todėl galite sukurti savo.
Tos pačios programos arba tos pačios dienoraščio pastabos leis jums pristatyti šią naują kodo kalbą. Jums bus sukurtas langelis su dainų sąrašu, kuriame spustelėjus galėsite pasirinkti tą, kurios šiuo metu norite klausytis; Į sąrašą galite įtraukti tiek dainų, kiek norite, nes tam nėra jokių apribojimų.
Būtinas Javascript šaltinio kodas, kad galėtumėte sukurti savo grojaraštis ir bėgi ant tavo HTML muzikos grotuvas; yra toks:
<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>Svarbu, kad kiekvienoje „parinkties“ etiketėje, kurią matote, įvestumėte muzikos adresą su jos pavadinimu, kaip ir ankstesniame pavyzdyje; nes gali įvykti klaida leidžiant garsą.
Toliau pateiktame vaizdo įraše galėsite vaizdingiau pamatyti viską, ką paaiškinsime šiame straipsnyje, jei kiltų kokių nors abejonių. Be to, galite jį tinkinti ir dar daugiau, naudodami sudėtingesnius kodus ir programavimo kalbas.