Kako na web stranici u pozadini puštate glazbu preuzetu na vaše računalo?
1. metoda:HTML5 audio player
Najčešći način reprodukcije zvuka na web-stranici je korištenje elementa HTML5 audio playera. Ovaj element vam omogućuje da ugradite audio datoteku u web stranicu i pruža osnovne kontrole reprodukcije kao što su reprodukcija, pauza, zaustavljanje i traženje.
Da biste koristili element HTML5 audio playera, prvo trebate dodati sljedeći kod u svoj HTML dokument:
```html
```
Atribut "src" navodi URL audio datoteke koju želite reproducirati. Atribut "type" navodi MIME vrstu audio datoteke. U ovom primjeru koristimo MP3 datoteku koja ima MIME vrstu "audio/mpeg".
Nakon što svom dokumentu dodate element HTML5 audio playera, možete koristiti sljedeći JavaScript kod za reprodukciju audio datoteke:
```javascript
var audio =document.querySelector("audio");
audio.play();
```
Ovaj kod će reproducirati audio datoteku u pozadini. Zvuk će se nastaviti reproducirati čak i ako korisnik ode na drugu stranicu ili zatvori preglednik.
Metoda 2:JavaScript audio API
Drugi način za reprodukciju zvuka na web stranici je korištenje JavaScript audio API-ja. Ovaj API pruža veću kontrolu nad audio reprodukcijom od elementa HTML5 audio playera. Na primjer, možete koristiti audio API za stvaranje prilagođenih kontrola reprodukcije, vizualizaciju audio valnog oblika i primjenu audio efekata.
Da biste koristili JavaScript audio API, prvo morate stvoriti audio kontekst. Audiokontekst je glavni objekt koji ćete koristiti za interakciju s audio API-jem. Možete stvoriti audio kontekst pomoću sljedećeg JavaScript koda:
```javascript
var audioCtx =novi audiokontekst();
```
Nakon što ste stvorili audiokontekst, možete upotrijebiti sljedeći JavaScript kod za stvaranje čvora audio izvora:
```javascript
var izvor =audioCtx.createMediaElementSource(audio);
```
Čvor audio izvora posebna je vrsta audio čvora koji se može koristiti za reprodukciju zvuka iz medijskog elementa kao što je HTML5 audio player element.
Nakon što ste izradili čvor izvora zvuka, možete upotrijebiti sljedeći JavaScript kod da biste ga povezali s kontekstom zvuka:
```javascript
izvor.povezivanje(audioCtx.odredište);
```
Ovaj će kod povezati čvor audio izvora s odredištem audio konteksta, što je zadani izlazni uređaj za audio API.
Nakon što povežete čvor audio izvora sa audio kontekstom, možete koristiti sljedeći JavaScript kod za reprodukciju audio datoteke:
```javascript
audio.play();
```
Ovaj kod će reproducirati audio datoteku u pozadini. Zvuk će se nastaviti reproducirati čak i ako korisnik ode na drugu stranicu ili zatvori preglednik.
Metoda 3:Web Audio API
Web Audio API je napredniji audio API koji pruža još veću kontrolu nad audio reprodukcijom nego JavaScript audio API. Web Audio API može se koristiti za stvaranje složenih audio efekata, sintetiziranje zvuka i kontrolu zvuka u stvarnom vremenu.
Da biste koristili Web Audio API, prvo morate stvoriti audio kontekst. Audiokontekst je glavni objekt koji ćete koristiti za interakciju s Web Audio API-jem. Možete stvoriti audio kontekst pomoću sljedećeg JavaScript koda:
```javascript
var audioCtx =novi audiokontekst();
```
Nakon što ste stvorili audiokontekst, možete upotrijebiti sljedeći JavaScript kod za stvaranje čvora audio izvora:
```javascript
var izvor =audioCtx.createMediaElementSource(audio);
```
Čvor audio izvora posebna je vrsta audio čvora koji se može koristiti za reprodukciju zvuka iz medijskog elementa kao što je HTML5 audio player element.
Nakon što ste izradili čvor izvora zvuka, možete upotrijebiti sljedeći JavaScript kod za stvaranje čvora pojačanja zvuka:
```javascript
var gainNode =audioCtx.createGain();
```
Čvor pojačanja zvuka jednostavan je audio efekt koji se može koristiti za kontrolu glasnoće zvuka.
Nakon što ste izradili čvor izvora zvuka i čvor pojačanja zvuka, možete upotrijebiti sljedeći JavaScript kôd da ih povežete sa audio kontekstom:
```javascript
izvor.connect(gainNode);
gainNode.connect(audioCtx.destination);
```
Ovaj kod će povezati čvor izvora zvuka s čvorom pojačanja zvuka, a zatim čvor pojačanja zvuka s odredištem audio konteksta.
Nakon što povežete čvor izvora zvuka i čvor pojačanja zvuka s audio kontekstom, možete koristiti sljedeći JavaScript kod za reprodukciju audio datoteke:
```javascript
audio.play();
```
Ovaj kod će reproducirati audio datoteku u pozadini. Zvuk će se nastaviti reproducirati čak i ako korisnik ode na drugu stranicu ili zatvori preglednik.
Zaključak
Postoji nekoliko različitih načina za reprodukciju glazbe koja je preuzeta na vaše računalo u pozadini na web stranici. Najbolja metoda ovisi o vašim specifičnim potrebama. Ako trebate osnovne kontrole reprodukcije, HTML5 audio player element je dobar izbor. Ako vam je potrebna veća kontrola nad audio reprodukcijom, JavaScript audio API ili Web Audio API su bolje opcije.