API clients web - natives

API web clients natives

Les API web clients natives sont des API qui sont intégrées directement dans les navigateurs web modernes, et qui permettent d’interagir avec des fonctionnalités du navigateur.

Il existe de nombreuses API web clients natives, qui permettent de réaliser des opérations variées, comme la géolocalisation, la manipulation des éléments audio et vidéo, etc.

Voici quelques exemples d’API web clients natives qui vous nous permettrent de nous familiariser avec la syntaxe et les fonctionnalités de ces API.

Géolocalisation

L’API de géolocalisation est une API web qui permet de récupérer la position géographique de l’utilisateur.

Pour utiliser l’API de géolocalisation, on peut utiliser l’objet navigator.geolocation qui est disponible dans la plupart des navigateurs modernes.

Exemple

Bloc HTML :

<div id="geo">
  Javascript doit être activé pour afficher la géolocalisation.
</div>

Code JavaScript :

geo.js

let geo = document.querySelector('#geo'); // On récupère l'élément avec l'id geo

if (geo) { // Si l'élément existe
    geo.innerHTML = ''; // On vide le contenu de l'élément

    if (!navigator.geolocation) { // Si la géolocalisation n'est pas disponible
        geo.appendChild(document.createTextNode('La géolocalisation n\'est pas disponible sur votre navigateur ou vous avez refusé la demande.'));
    } else {
        geo.innerHTML += 'La géolocalisation est disponible sur votre navigateur. <br/> J\'essaie de récupérer votre position. <br/> <br/>';

        navigator.geolocation.getCurrentPosition((position) => { // On récupère la position de l'utilisateur

            // On affiche les informations de géolocalisation
            geo.innerHTML += `
                Vous avez accepté la géolocalisation. <br/> <br/>
                L'API a renvoyé les informations suivantes : <br/>
                Latitude: ${position.coords.latitude}<br>Longitude: ${position.coords.longitude}`;

        },
            (error) => { // En cas d'erreur
                geo.innerHTML += `L'API de Geolocalisation a retourné l\'erreur suivante : ${error.message}`;
            });
    }
}

Résultat :

Javascript doit être activé pour afficher la géolocalisation.

HTMLMediaElement (Video et Audio)

L’API HTMLMediaElement permet de manipuler des éléments audio et vidéo dans une page web.

Vidéo

Code HTML :

<video controls>
  <source src="fish-toy.mp4" type="video/mp4" />
  <source src="fish-toy.webm" type="video/webm" />
  <p>
    Votre navigateur ne peut pas lire les vidéos.
    <a href="fish-toy.mp4">Vous pouvez visiter ce lien direct.</a>
  </p>
</video>

Résultat :

Audio

<audio id="audio-player" controls>
  <source src="horse.mp3" type="audio/mpeg" />
  Votre navigateur ne supporte pas la balise audio
</audio>

Résultat :

L’API offre des fonctions pour intéragir avec les éléments audio et vidéo, comme par exemple :

• play() : pour démarrer la lecture
• pause() : pour mettre en pause la lecture
• volume : pour régler le volume

Résultat :

Code :

media.js

const audio = document.getElementById('audio-player'); // Récupérer l'élément audio

if (audio) {

  const audioControls = document.getElementById('audio-controls'); // Récupérer l'élément audio-controls qui contiendra les boutons

  // Créer un objet contenant les textes des boutons
  let buttons = {
    play: "Jouer",
    pause: "Pause",
    volumeMoins: "Volume -",
    volumePlus: "Volume +",
  };

  // Créer un élément p qui contient un span pour afficher le volume
  let volumeP = document.createElement('p');
  volumeP.textContent = 'Volume : ';

  let volume = document.createElement('span');
  volume.id = 'audio-volume';
  volume.textContent = Math.round(audio.volume * 100);
  volumeP.appendChild(volume);


  //ajouter les boutons au container audioControls
  for (let key in buttons) {
    let button = document.createElement('button');
    button.textContent = buttons[key];
    button.id = key;
    audioControls.appendChild(button);

    // Ajouter un event listener pour chaque bouton
    button.addEventListener('click', () => {
      switch (key) {
        case 'play':
          audio.play();
          break;
        case 'pause':
          audio.pause();
          break;
        case 'volumePlus':
          if (audio.volume < 1) {
            audio.volume += 0.1;
          }
          volume.textContent = Math.round(audio.volume * 100);
          break;
        case 'volumeMoins':
          if (audio.volume > 0) {
            audio.volume -= 0.1;
          }
          volume.textContent = Math.round(audio.volume * 100);
          break;
      }
    });
  }

  // Ajouter le paragraphe volumeP à audioControls
  audioControls.appendChild(volumeP);

}

Conclusion

Dans ces premiers exemples, nous avons vu qu’il est simple d’interagir avec des fonctionnalités du navigateur en utilisant des API web clients, que vous avez déjà probablement utilisées.

On peut retenir que :

• Les API web clients permettent d’interagir avec des fonctionnalités du navigateur, comme la géolocalisation, les éléments audio et vidéo, etc.
• Ces API sont accessibles (ou exposées) via des objets JavaScript, et sont documentées sur MDN.
• Les API web clients sont supportées par la plupart des navigateurs modernes, mais il est important de vérifier la compatibilité avant de les utiliser.

Passons maintenant à des exemples d’API tierces, qui ne sont pas natives au navigateur.