Ajout d’effets audio aux sites Web dynamiques

Lorsque nous créons des sites Web dynamiques, nous devrons peut-être ajouter de l’audio. HTML5 nous permet de le faire avec la magie du <audio /> composant.

TL; Dr

Ces démos utilisent Vue et Nuxt pour présenter des fichiers audio avec des contrôles par défaut, des actions en jeu automatique et personnalisables pour les besoins de votre propre application. Le concept doit fonctionner dans n’importe quel cadre JavaScript.

Afficher le son avec des commandes

Pour ajouter un son dans notre application, nous devons utiliser le <audio /> élément avec le src pointant vers notre nom de fichier.

<template>
    <div>
        <h2 class="text-2xl my-3">Let's go Mario!</h2>
        <audio autoplay src="/mario.wav" preload="auto" controls />
    </div>
</template>

En ajoutant controlsle navigateur affichera les options de contrôle par défaut.

Vous aurez des options pour télécharger le fichier audio, modifier la vitesse de lecture, lire et faire une pause et modifier le volume.

Préchargement

Nous pouvons précharger le fichier audio en ajoutant preload="auto" Et même plus tôt dans l’en-tête si nous le voulons.

<link rel="preload" as="audio" href="/mario.wav" type="audio/wav">

Le link La balise pré-téléchargera le fichier dès que le HTML est analysé dans l’en-tête, mais le audio La balise préchargera le fichier.

Plusieurs sources

Si nous avons plusieurs versions du fichier et que nous voulons nous assurer que notre navigateur le prend en charge, nous pourrait Utiliser le source Tag également, mais je ne l’utilise pas dans notre exemple.

<audio controls preload="auto">
  <source src="/audio/mario.mp3" type="audio/mpeg">
  <source src="/audio/mario.wav" type="audio/wav">
  Your browser does not support the audio element.
</audio>

En place automatique

Si nous ajoutons autoplay Pour notre élément, il lit automatiquement le fichier audio. Cependant, c’est SEULEMENT Après l’interaction à la page Web. Vous pouvez le voir en action en modifiant les itinéraires et en cliquant sur rentrer chez vous.

Boucle laser

Notre exemple de pistolet laser bouclera le fichier encore et encore. Nous ajoutons le loop Attribut si nous voulons répéter le son. Encore une fois, cela ne commencera à jouer que après l’interaction de la page.

Commandes personnalisées

Si vous créez un jeu ou un site Web dynamique, vous voudrez personnaliser vos contrôles.

Crochet audio

Nous avons également besoin d’un crochet audio pour contrôler notre élément audio.

export const useAudio = (filename: string) => {

    const audio = ref<HTMLAudioElement | null>(null)

    const isPlaying = ref<boolean>(false)
    const currentTime = ref<number>(0)
    const duration = ref<number>(0)

    const seek = () => {
        if (audio.value) audio.value.currentTime = currentTime.value
    }

    const updateTime = () => {
        if (audio.value) currentTime.value = audio.value.currentTime
    }

    const pause = () => {
        if (!audio.value) {
            return
        }
        if (audio.value.paused) {
            audio.value.play()
            return;
        }
        audio.value.pause()
    }

    onMounted(() => {

        if (!audio.value) {
            return
        }

        audio.value.src = filename
        audio.value.autoplay = true
        audio.value.ontimeupdate = updateTime
        audio.value.onplay = () => {
            isPlaying.value = true
        }
        audio.value.onpause = () => {
            isPlaying.value = false
        }
        audio.value.onloadedmetadata = () => {
            duration.value = audio.value!.duration
        }
    })

    return {
        audio,
        pause,
        isPlaying,
        currentTime,
        duration,
        seek
    }
}

Nuxt et d’autres frameworks ont des bibliothèques pour cela avec de nombreuses autres fonctionnalités, alors décomposons comment vous pouvez en créer un.

Signaux

Tout ce qui nécessitera que le Dom mettra à jour dynamiquement aura besoin d’un signal.

const isPlaying = ref<boolean>(false)
const currentTime = ref<number>(0)
const duration = ref<number>(0)

Nom de fichier

Nous définissons notre nom de fichier en le passant au crochet.

audio.value.src = filename

Lorsque le composant est monté, le nom de fichier aussi.

Attributs

Notre autoplay et loop Les attributs sont également disponibles.

audio.value.autoplay = true

conduite

Remarquez le isPlaying est manipulé en utilisant le intégré onpause et onplay.

audio.value.onplay = () => {
    isPlaying.value = true
}
audio.value.onpause = () => {
    isPlaying.value = false
}
audio.value.onloadedmetadata = () => {
    duration.value = audio.value!.duration
}

Durée

Nous devrons calculer la durée du fichier audio dès qu’il sera disponible.

audio.value.onloadedmetadata = () => {
    duration.value = audio.value!.duration
}

Bouton de lecture et de pause

Nous devrons activer correctement le jeu / pause.

const pause = () => {
    if (!audio.value) {
        return
    }
    if (audio.value.paused) {
        audio.value.play()
        return
    }
    audio.value.pause()
}

S’il est interrompu, nous affichons le jeu; Si nous jouons, nous affichons une pause.

Note: Nous ne pouvons pas utiliser l’élément audio tant que la référence n’est correctement attachée au crochet avec audio.value. Nous ne faisons rien sinon encore attachés lors du chargement.

Temps de jeu actuel

Au lieu de démarrer une horloge lorsque l’audio commence à jouer, nous pouvons regarder le ontimeupdate événement.

audio.value.ontimeupdate = updateTime

Nous mettons à jour notre signal en fonction de cette période.

const updateTime = () => {
    if (audio.value) currentTime.value = audio.value.currentTime
}

Utilisation des crochets

Nous appelons le crochet à l’intérieur de notre composant.

<script setup lang="ts">
const { audio, isPlaying, pause, currentTime, duration, seek } =
  useAudio("/basketball.wav")
</script>

<template>
  <main class="flex items-center justify-center gap-5">
    <button
      type="button"
      class="p-3 border rounded-xl bg-blue-500 text-white font-bold cursor-pointer"
      v-on:click="pause"
    >
      {{ isPlaying ? "Pause" : "Play" }}
    </button>
    <audio ref="audio" preload="auto" />
    <input
      type="range"
      class="w-full accent-blue-500"
      min="0"
      :max="duration"
      step="0.1"
      v-model="currentTime"
      @input="seek"
    />
  </main>
</template>

Élément d’attachement

const { audio, ... } = useAudio('/filename');

...

<audio ref="audio" preload="auto" />

Bouton de lecture

Depuis isPlaying est un signal, nous pouvons facilement afficher le texte approprié.

{{ isPlaying ? "Pause" : "Play" }}

Chercher avec entrée

Nous utilisons un élément d’entrée de plage pour rechercher.

<input
  type="range"
  class="w-full accent-blue-500"
  min="0"
  :max="duration"
  step="0.1"
  v-model="currentTime"
  @input="seek"
/>

Nous pouvons définir notre duration et currentTimeet lorsque nous le changeons, cela mettra à jour le seek fonction.

Ce n’est que le début. Maintenant, allez construire quelque chose et écoutez vos sons!

Démo: Vercel
Repo: Girub