Hogyan játszol le a számítógépedre letöltött zenéket a weboldal háttérben?
1. módszer:HTML5 audiolejátszó
A weboldalon a hang lejátszásának legáltalánosabb módja a HTML5 audiolejátszó elem használata. Ez az elem lehetővé teszi hangfájl beágyazását egy weboldalba, és alapvető lejátszási vezérlőket biztosít, például lejátszást, szünetet, leállítást és keresést.
A HTML5 audiolejátszó elem használatához először hozzá kell adnia a következő kódot a HTML-dokumentumhoz:
``` html
```
Az „src” attribútum a lejátszani kívánt hangfájl URL-jét adja meg. A "type" attribútum az audiofájl MIME-típusát adja meg. Ebben a példában egy MP3 fájlt használunk, amelynek MIME típusa "audio/mpeg".
Miután hozzáadta a HTML5 audiolejátszó elemet a dokumentumhoz, a következő JavaScript kódot használhatja a hangfájl lejátszásához:
``` javascript
var audio =document.querySelector("audio");
audio.play();
```
Ez a kód lejátssza a hangfájlt a háttérben. A hang lejátszása akkor is folytatódik, ha a felhasználó egy másik oldalra lép, vagy bezárja a böngészőt.
2. módszer:JavaScript audio API
Egy másik módja a hang lejátszásának egy weboldalon a JavaScript audio API használata. Ez az API jobban szabályozza a hanglejátszást, mint a HTML5 audiolejátszó elem. Az audio API segítségével például egyéni lejátszásvezérlőket hozhat létre, megjelenítheti a hanghullámformát, és hangeffektusokat alkalmazhat.
A JavaScript audio API használatához először létre kell hoznia egy hangkörnyezetet. A hangkörnyezet az a fő objektum, amelyet az audio API-val való interakcióhoz fog használni. Hangkörnyezetet a következő JavaScript-kóddal hozhat létre:
``` javascript
var audioCtx =new AudioContext();
```
Miután létrehozott egy hangkörnyezetet, a következő JavaScript-kóddal hozhat létre hangforrás csomópontot:
``` javascript
var source =audioCtx.createMediaElementSource(audio);
```
A hangforráscsomópont egy speciális típusú hangcsomópont, amely egy médiaelemből, például egy HTML5 audiolejátszó elemből származó hang lejátszására használható.
Miután létrehozott egy hangforrás-csomópontot, a következő JavaScript-kóddal csatlakoztathatja azt a hangkörnyezethez:
``` javascript
source.connect(audioCtx.destination);
```
Ez a kód összekapcsolja a hangforrás csomópontját a hangkörnyezet céljával, amely az audio API alapértelmezett kimeneti eszköze.
Miután csatlakoztatta a hangforrás csomópontját a hangkörnyezethez, a következő JavaScript kódot használhatja a hangfájl lejátszásához:
``` javascript
audio.play();
```
Ez a kód lejátssza a hangfájlt a háttérben. A hang lejátszása akkor is folytatódik, ha a felhasználó egy másik oldalra lép, vagy bezárja a böngészőt.
3. módszer:Web Audio API
A Web Audio API egy fejlettebb audio API, amely még jobban szabályozza a hanglejátszást, mint a JavaScript audio API. A Web Audio API segítségével összetett hangeffektusok hozhatók létre, hangszintetizálhatók és valós időben vezérelhetők a hangok.
A Web Audio API használatához először létre kell hoznia egy hangkörnyezetet. A hangkontextus a fő objektum, amelyet a Web Audio API-val való interakcióhoz fog használni. Hangkörnyezetet a következő JavaScript-kóddal hozhat létre:
``` javascript
var audioCtx =new AudioContext();
```
Miután létrehozott egy hangkörnyezetet, a következő JavaScript-kóddal hozhat létre hangforrás csomópontot:
``` javascript
var source =audioCtx.createMediaElementSource(audio);
```
A hangforráscsomópont egy speciális típusú hangcsomópont, amely egy médiaelemből, például egy HTML5 audiolejátszó elemből származó hang lejátszására használható.
Miután létrehozott egy hangforrás-csomópontot, a következő JavaScript-kóddal hozhat létre hangerősítő csomópontot:
``` javascript
var gainNode =audioCtx.createGain();
```
A hangerősítő csomópont egy egyszerű hangeffektus, amellyel szabályozható a hang hangereje.
Miután létrehozott egy hangforrás-csomópontot és egy hangerősítő csomópontot, a következő JavaScript-kóddal kapcsolhatja össze őket a hangkontextussal:
``` javascript
forrás.connect(gainNode);
gainNode.connect(audioCtx.destination);
```
Ez a kód csatlakoztatja az audioforrás csomópontot az audioerősítési csomóponthoz, majd az audioerősítési csomópontot a hangkörnyezet céljához.
Miután csatlakoztatta az audioforrás-csomópontot és a hangerősítő csomópontot az audiokontextushoz, a következő JavaScript-kódot használhatja a hangfájl lejátszásához:
``` javascript
audio.play();
```
Ez a kód lejátssza a hangfájlt a háttérben. A hang lejátszása akkor is folytatódik, ha a felhasználó egy másik oldalra lép, vagy bezárja a böngészőt.
Következtetés
A számítógépére letöltött zeneszámok számos különböző módon játszhatók le egy weboldal háttérben. A legjobb módszer az Ön egyedi igényeitől függ. Ha alapvető lejátszási vezérlőkre van szüksége, a HTML5 audiolejátszó elem jó választás. Ha nagyobb szabályozásra van szüksége a hanglejátszás felett, a JavaScript audio API vagy a Web Audio API jobb választás.