Ciyaaryahanka muusigga ee HTML Waa maxay koodhku?

Qoraalkan oo dhan, waxaad ku baran doontaa sida loo abuuro adigu Ciyaaryahan muusig HTML; ku salaysan koodh saafi ah. Markaa uma baahnid inaad soo dejiso barnaamij kasta waxaadna awoodi doontaa inaad ku isticmaasho intarneedka iyo khadka intaba.

music-player-in-html-1

Ciyaaryahan muusig HTML

Waqtigan xaadirka ah, waxaad ka heli kartaa boqolaal barnaamijyo khaas ah oo loogu talagalay muusikada (ama nooc kasta oo maqal ah) adoo daalacanaya shabakadda; qaar ka fiican kuwa kale oo sidaas, leh ikhtiyaarro badan iyo waliba beddello badan. Si kastaba ha ahaatee, waxaa suurtogal ah in annaga lafteena, anagoo adeegsanayna koodhadh, aan abuuri karno kuwayaga Ciyaaryahan muusig HTML; dabcan, inay aad u fudud tahay, laakiin inay fuliso shaqadeeda.

Uma baahnid inaad khabiir ku noqoto koodh -gelinta iyo barnaamijyada hawshan, maadaama runtu tahay, waa wax aad u fudud in la sameeyo oo aad u fudud.

Waa maxay HTML?

Kahor intaadan ku bilaabin nuxurka maqaalka laftiisa, waxaan aaminsanahay inay aad muhiim u tahay inaad wax yar ka ogaato waxa HTML yahay; wax aad malaha maqashay oo la sheegay ama laga akhriyay mar uun.

HTML macnaheedu waa Luqadda Calaamadaha HyperText; kaas oo ah luqad koodh loo isticmaalo horumarinta bogagga shabakadda. Si gaar ahaaneed, waa koodhkii inaga caawiya in aan soo ururinno dhammaan macluumaadka, xogta, nuxurka farriimaha badan, qoraalka iyo waxyaabo kaloo badan; xagga naqshadeynta iyo qaab -dhismeedka, waxay ku sii jirtaa qaybta CSS, oo ah luuqad koodh kale.

Markaad akhrinayso maqaalkan, waxaad ogaan doontaa in lagu sameeyay adeegsiga isla luuqadda HTML; daalacashada shabakadda sida Chrome, Microsoft Edge iyo kuwa kale, ayaa mas'uul ka ah "turjumidda" xeerkan si ay noo tusaan waxyaabaha caadiga ah ee bogga. Si laguu siiyo fikrad cad, waxaad isku dayi kartaa toobiyehan soo socda hadda, laga bilaabo biraawsarkaaga Chrome: Ctrl + Shift + I; tani waxay furi doontaa aaladda soo -saaraha waxaadna arki doontaa sida bogga internetka dhab ahaantii u eg yahay haddii aan 'la tarjumin'.

Durba si cad, si kooban u qeexaya waxa uu yahay koodhka HTML; hadda waxaan ku tusi doonaa sida loo abuuro muusikada.

Ciyaaryahan muusig oo ku jira HTML, koodhadh

Si aad u aragto sida cayaaryahan muusig ugu eg yahay biraawsarka shabakadda, iskuday inaad jiido waddo aad haysato, gudaha biraawsarka; waxaad arki doontaa inay bilaabi doonto inay ciyaarto oo ku tusto kontaroolada ugu weyn.

Sidaan kuu sheegnay, waa wax aad u fudud, oo si fudud u lahaan doona badhanka Play/Haki, Navigator waqtiga, waqtiga tirooyinka iyo xakamaynta mugga. Asal ahaan, dhammaan daalacashada kale waxay leeyihiin naqshad la mid ah.

Tani wax badan bay kaa caawin doontaa, haddii aad fursad u abuurto boggaaga gaarka ah iyo / ama blog, oo aad u baahan tahay inaad geliso cod; inkastoo weli, waxaa suurtogal ah inaad adigu u abuuri karto. Waxaan kugula talineynaa inaad haysato barnaamij horumarineed bogga webka si uu kuu caawiyo, in kasta oo isla qoraallada baloogga, ay sameyn doonto.

Si aad u geliso ciyaaryahanka

Markaad haysato jirka boggaaga oo leh HTML5; Xeerka kuu oggolaanaya inaad geliso ciyaaryahanka fudud wuxuu noqon doonaa sidan:

<audio src="../music/woman.mp3" controls="controls" type="audio/mpeg" preload="preload">
</audio>

Calaamadda " »Waa maxay waxa noo oggolaan doona inaan soo bandhigno jidkayaga, laftiisa dhexdeeda, waxaa jiri doona sifooyin gaar ah. Xaaladdan oo kale, the CBC, waa cinwaanka galka uu ku yaal muusiggeennu; ah kontoroolha, waa kan na tusi doona gudiga xakamaynta fudud; ah Horey usoco, waa kaydinta kaydinta faylka, si looga hortago inay ku dhegto oo aakhirka faylka Autoplay, taas oo noqon karta ama laga yaabo inaysan ahayn ikhtiyaar, maadaama ay tani ka dhigayso in raadkeennu si toos ah u bilowdo.

Sifooyinkii hore, waxaa lama huraan ah in ay joogaan, si aan annaga Ciyaaryahan muusig HTML, si fiican ayuu u shaqeeyaa.

Haddii aad jeceshahay oo aad u xiisaynayso qaybtan ka mid ah adduunka kumbuyuutarka, wax kasta oo la xidhiidha koodh, barnaamijyo iyo kuwo kale; Waxaad booqan kartaa maqaalka soo socda si aad u bilowdo inaad waxbadan ka barato tan iyo luqadaha kale ee koodhka: Waa maxay luuqadda barnaamijka lagu barto?

Code si aad u abuurto liis muusik

Qeybtii hore, waxaan si fudud u aragnay waxa uu yahay koodhku in la geliyo ciyaaryahan, oo leh waddo cayiman, ama halkii, cod gaar ah; markaa tani ma ciyaari doonto hees kale, oo aan ahayn tan aad u dooratay astaamaha «src»; sidaa darteed haddii aad rabto waddo kale, waa inaad aaddaa koodhka isha oo aad beddeshaa cinwaanka astaamaha ama xitaa aad gasho ciyaartoy kale, si aad u dhigto cinwaanka cusub ee galka.

Si kastaba ha noqotee, waa suurtogal inaad gasho koodh kale, laakiin markan Javascript, kaas oo kuu oggolaanaya inaad gasho a playlist, si aad adigu u samaysan karto.

Barnaamijyo isku mid ah ama isla baloogyada qoraallada, ayaa kuu oggolaan doona inaad soo bandhigto luqaddan koodhka cusub. Waxaa la idiin abuuri doonaa sanduuq, oo ay ku qoran yihiin heeso, kaas oo, gujinaya, aad ku xulan karto midda aad rabto inaad dhageysato xilligan; waxaad ku dari kartaa liiska, inta heeso ee aad rabto, sababtoo ah wax xad ah kuma laha.

Koodhka ilaha Javascript ee lagama maarmaanka ah, si aad u awooddo inaad abuurto adigu playlist oo ku orodkaaga Ciyaaryahan muusig HTML; waa kuwan soo socda:

<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>

Waxaa muhiim ah in sumad kasta oo “ikhtiyaar” ah ee aad aragto, aad geliso cinwaanka muusigga magaciisa, sida tusaalahii hore; maadaama ay suurtogal tahay in khalad dhaco marka la ciyaarayo codka.

Fiidiyowga soo socda ee hoose, waxaad awoodi doontaa inaad ku aragto qaab garaaf leh, wax kasta oo aan ku sharraxno maqaalkan, haddii aad wax shaki ah qabtid. Waxa intaa dheer in aad adigu u habayn karto iyo in ka badan, adiga oo adeegsanaya koodhadh aad u adag iyo luuqadaha barnaamijka.


Ka tag faalladaada

cinwaanka email aan la daabacin doonaa. Beeraha loo baahan yahay waxaa lagu calaamadeeyay la *

*

*

  1. Masuul ka ah xogta: Actualidad Blog
  2. Ujeedada xogta: Xakamaynta SPAM, maaraynta faallooyinka.
  3. Sharci: Oggolaanshahaaga
  4. Isgaarsiinta xogta: Xogta looma gudbin doono dhinacyada saddexaad marka laga reebo waajibaadka sharciga ah.
  5. Kaydinta xogta: Macluumaadka ay martigelisay Shabakadaha Occentus (EU)
  6. Xuquuqda: Waqti kasta oo aad xadidi karto, soo ceshan karto oo tirtiri karto macluumaadkaaga.