Kako v ozadju na spletni strani predvajate glasbo, ki ste jo prenesli v računalnik?
1. način:zvočni predvajalnik HTML5
Najpogostejši način predvajanja zvoka na spletni strani je uporaba elementa predvajalnika zvoka HTML5. Ta element vam omogoča vdelavo zvočne datoteke v spletno stran in zagotavlja osnovne kontrole predvajanja, kot so predvajanje, premor, ustavitev in iskanje.
Če želite uporabiti element zvočnega predvajalnika HTML5, morate v svoj dokument HTML najprej dodati to kodo:
```html
```
Atribut "src" določa URL zvočne datoteke, ki jo želite predvajati. Atribut "type" določa vrsto MIME zvočne datoteke. V tem primeru uporabljamo datoteko MP3, ki ima vrsto MIME "audio/mpeg".
Ko v svoj dokument dodate element zvočnega predvajalnika HTML5, lahko uporabite to kodo JavaScript za predvajanje zvočne datoteke:
```javascript
var audio =document.querySelector("avdio");
audio.play();
```
Ta koda bo predvajala zvočno datoteko v ozadju. Zvok se bo še naprej predvajal, tudi če se uporabnik pomakne na drugo stran ali zapre brskalnik.
2. način:API za zvok JavaScript
Drug način predvajanja zvoka na spletni strani je uporaba zvočnega API-ja JavaScript. Ta API zagotavlja večji nadzor nad predvajanjem zvoka kot element predvajalnika zvoka HTML5. Z zvočnim API-jem lahko na primer ustvarite kontrole predvajanja po meri, vizualizirate zvočno valovno obliko in uporabite zvočne učinke.
Če želite uporabljati API za zvok JavaScript, morate najprej ustvariti zvočni kontekst. Zvočni kontekst je glavni objekt, ki ga boste uporabili za interakcijo z zvočnim API-jem. Zvočni kontekst lahko ustvarite z naslednjo kodo JavaScript:
```javascript
var audioCtx =new AudioContext();
```
Ko ustvarite zvočni kontekst, lahko uporabite naslednjo kodo JavaScript za ustvarjanje vozlišča zvočnega vira:
```javascript
var source =audioCtx.createMediaElementSource(avdio);
```
Vozlišče zvočnega vira je posebna vrsta zvočnega vozlišča, ki se lahko uporablja za predvajanje zvoka iz medijskega elementa, kot je element zvočnega predvajalnika HTML5.
Ko ustvarite vozlišče zvočnega vira, lahko uporabite naslednjo kodo JavaScript, da ga povežete z zvočnim kontekstom:
```javascript
source.connect(audioCtx.destination);
```
Ta koda bo povezala vozlišče zvočnega vira s ciljem zvočnega konteksta, ki je privzeta izhodna naprava za zvočni API.
Ko povežete vozlišče zvočnega vira z zvočnim kontekstom, lahko uporabite to kodo JavaScript za predvajanje zvočne datoteke:
```javascript
audio.play();
```
Ta koda bo predvajala zvočno datoteko v ozadju. Zvok se bo še naprej predvajal, tudi če se uporabnik pomakne na drugo stran ali zapre brskalnik.
3. način:API spletnega zvoka
Web Audio API je naprednejši zvočni API, ki zagotavlja še večji nadzor nad predvajanjem zvoka kot JavaScript audio API. Web Audio API se lahko uporablja za ustvarjanje kompleksnih zvočnih učinkov, sintetiziranje zvoka in nadzor zvoka v realnem času.
Če želite uporabljati API spletnega zvoka, morate najprej ustvariti zvočni kontekst. Zvočni kontekst je glavni predmet, ki ga boste uporabili za interakcijo z API-jem za spletni zvok. Zvočni kontekst lahko ustvarite z naslednjo kodo JavaScript:
```javascript
var audioCtx =new AudioContext();
```
Ko ustvarite zvočni kontekst, lahko uporabite naslednjo kodo JavaScript za ustvarjanje vozlišča zvočnega vira:
```javascript
var source =audioCtx.createMediaElementSource(avdio);
```
Vozlišče zvočnega vira je posebna vrsta zvočnega vozlišča, ki se lahko uporablja za predvajanje zvoka iz medijskega elementa, kot je element zvočnega predvajalnika HTML5.
Ko ustvarite vozlišče zvočnega vira, lahko uporabite naslednjo kodo JavaScript, da ustvarite vozlišče zvočnega vira:
```javascript
var gainNode =audioCtx.createGain();
```
Vozlišče za pridobitev zvoka je preprost zvočni učinek, ki ga lahko uporabite za nadzor glasnosti zvoka.
Ko ustvarite vozlišče avdio vira in vozlišče avdio ojačanja, lahko uporabite naslednjo kodo JavaScript, da ju povežete z zvočnim kontekstom:
```javascript
izvor.connect(gainNode);
gainNode.connect(audioCtx.destination);
```
Ta koda bo povezala vozlišče zvočnega vira z vozliščem za ojačenje zvoka in nato vozlišče za ojačenje zvoka s ciljem zvočnega konteksta.
Ko povežete vozlišče zvočnega vira in vozlišče za ojačenje zvoka z zvočnim kontekstom, lahko uporabite to kodo JavaScript za predvajanje zvočne datoteke:
```javascript
audio.play();
```
Ta koda bo predvajala zvočno datoteko v ozadju. Zvok se bo še naprej predvajal, tudi če se uporabnik pomakne na drugo stran ali zapre brskalnik.
Zaključek
Obstaja nekaj različnih načinov za predvajanje glasbe, ki je bila prenesena v vaš računalnik v ozadju na spletni strani. Najboljša metoda je odvisna od vaših posebnih potreb. Če potrebujete osnovne kontrole predvajanja, je element zvočnega predvajalnika HTML5 dobra izbira. Če potrebujete več nadzora nad predvajanjem zvoka, sta boljša možnost JavaScript audio API ali Web Audio API.