Comment écouter de la musique téléchargée sur votre ordinateur en arrière-plan sur une page Web ?
Méthode 1 :lecteur audio HTML5
La manière la plus courante de lire de l'audio sur une page Web consiste à utiliser l'élément de lecteur audio HTML5. Cet élément vous permet d'intégrer un fichier audio dans une page Web et fournit des commandes de lecture de base telles que la lecture, la pause, l'arrêt et la recherche.
Pour utiliser l'élément lecteur audio HTML5, vous devez d'abord ajouter le code suivant à votre document HTML :
```html
```
L'attribut "src" spécifie l'URL du fichier audio que vous souhaitez lire. L'attribut "type" spécifie le type MIME du fichier audio. Dans cet exemple, nous utilisons un fichier MP3 de type MIME « audio/mpeg ».
Une fois que vous avez ajouté l'élément lecteur audio HTML5 à votre document, vous pouvez utiliser le code JavaScript suivant pour lire le fichier audio :
```javascript
var audio =document.querySelector("audio");
audio.play();
```
Ce code jouera le fichier audio en arrière-plan. L'audio continuera à être lu même si l'utilisateur accède à une autre page ou ferme le navigateur.
Méthode 2 : API audio JavaScript
Une autre façon de lire de l'audio sur une page Web consiste à utiliser l'API audio JavaScript. Cette API offre plus de contrôle sur la lecture audio que l'élément lecteur audio HTML5. Par exemple, vous pouvez utiliser l'API audio pour créer des commandes de lecture personnalisées, visualiser la forme d'onde audio et appliquer des effets audio.
Pour utiliser l'API audio JavaScript, vous devez d'abord créer un contexte audio. Le contexte audio est l'objet principal que vous utiliserez pour interagir avec l'API audio. Vous pouvez créer un contexte audio à l'aide du code JavaScript suivant :
```javascript
var audioCtx =new AudioContext();
```
Une fois que vous avez créé un contexte audio, vous pouvez utiliser le code JavaScript suivant pour créer un nœud source audio :
```javascript
var source =audioCtx.createMediaElementSource(audio);
```
Le nœud source audio est un type spécial de nœud audio qui peut être utilisé pour lire l'audio à partir d'un élément multimédia tel qu'un élément de lecteur audio HTML5.
Une fois que vous avez créé un nœud source audio, vous pouvez utiliser le code JavaScript suivant pour le connecter au contexte audio :
```javascript
source.connect(audioCtx.destination);
```
Ce code connectera le nœud source audio à la destination du contexte audio, qui est le périphérique de sortie par défaut de l'API audio.
Une fois que vous avez connecté le nœud source audio au contexte audio, vous pouvez utiliser le code JavaScript suivant pour lire le fichier audio :
```javascript
audio.play();
```
Ce code jouera le fichier audio en arrière-plan. L'audio continuera à être lu même si l'utilisateur accède à une autre page ou ferme le navigateur.
Méthode 3 : API Web Audio
L'API Web Audio est une API audio plus avancée qui offre encore plus de contrôle sur la lecture audio que l'API audio JavaScript. L'API Web Audio peut être utilisée pour créer des effets audio complexes, synthétiser le son et contrôler l'audio en temps réel.
Pour utiliser l'API Web Audio, vous devez d'abord créer un contexte audio. Le contexte audio est l'objet principal que vous utiliserez pour interagir avec l'API Web Audio. Vous pouvez créer un contexte audio à l'aide du code JavaScript suivant :
```javascript
var audioCtx =new AudioContext();
```
Une fois que vous avez créé un contexte audio, vous pouvez utiliser le code JavaScript suivant pour créer un nœud source audio :
```javascript
var source =audioCtx.createMediaElementSource(audio);
```
Le nœud source audio est un type spécial de nœud audio qui peut être utilisé pour lire l'audio à partir d'un élément multimédia tel qu'un élément de lecteur audio HTML5.
Une fois que vous avez créé un nœud de source audio, vous pouvez utiliser le code JavaScript suivant pour créer un nœud de gain audio :
```javascript
var gainNode =audioCtx.createGain();
```
Le nœud de gain audio est un effet audio simple qui peut être utilisé pour contrôler le volume de l'audio.
Une fois que vous avez créé un nœud source audio et un nœud gain audio, vous pouvez utiliser le code JavaScript suivant pour les connecter au contexte audio :
```javascript
source.connect(gainNode);
gainNode.connect(audioCtx.destination);
```
Ce code connectera le nœud source audio au nœud de gain audio, puis le nœud de gain audio à la destination du contexte audio.
Une fois que vous avez connecté le nœud source audio et le nœud de gain audio au contexte audio, vous pouvez utiliser le code JavaScript suivant pour lire le fichier audio :
```javascript
audio.play();
```
Ce code jouera le fichier audio en arrière-plan. L'audio continuera à être lu même si l'utilisateur accède à une autre page ou ferme le navigateur.
Conclusion
Il existe différentes manières de lire de la musique téléchargée sur votre ordinateur en arrière-plan sur une page Web. La meilleure méthode dépend de vos besoins spécifiques. Si vous avez besoin de commandes de lecture de base, l'élément lecteur audio HTML5 est un bon choix. Si vous avez besoin de plus de contrôle sur la lecture audio, l'API audio JavaScript ou l'API Web Audio sont de meilleures options.