Rychlé a snadné 2D prostorové audio s Howler.js

Vytvoření ponoření do webové aplikace je obtížné. Pokud do návrhu uživatelského rozhraní/UX nevložíte velké úsilí, budou tyto aplikace nakonec působit velmi plochým a bez života. Proto i ta nejmenší funkce, která dodává organický nádech, může výrazně zlepšit „pocit“ aplikace.

Pokud je vaše aplikace velmi zaměřená na zvuk (například hra), jednou takovou funkcí, kterou můžete snadno přidat, je prostorový zvuk. Dejte svému zvukovému efektu původ v rámci aplikace může celá věc vypadat větší . Pojďme se rychle podívat, jak toho lze dosáhnout pomocí JavaScript audio knihovna s názvem Howler .

Nebudu zabíhat do podrobností o tom, jak Howler sám o sobě funguje, ale toto téma si můžete přečíst v jejich dokumentech zde. Prozatím vše, co potřebujete vědět, je, že používáme Howl konstruktor pro vytvoření instance jednoduchého objektu zvukového efektu a že tento objekt přebírá volitelný parametr nazvaný stereo .

stereo Parametr akceptuje číslo v rozmezí od -1 do 1, které odpovídá předpětí levého/pravého kanálu pro stereo zvuk (-1 je zcela vlevo, 1 je zcela vpravo). V tomto příkladu chceme při kliknutí myší jednoduše přehrát zvukový efekt a chceme, aby to cítilo jako by ten zvuk pocházel z kurzoru.

Níže je základní nastavení pro použití v React komponent. Toto přehraje zadaný zvukový efekt normálně, kdykoli v komponentě klepnete myší.

import { useEffect } from "react";
import { Howl } from "howler";
import mySound from "./sounds/mySound.webm"; // our fictitious audio file, replace this with whatever sound you want to play

const MyComponent = () => {
  let component;

  useEffect(() => {
    const handleClick = (e) => {
      const sound = new Howl({ src: mySound }); // instantiate a new Howl here, passing it the path to our sound effect
      sound.play(); //  as soon as the object is created, we can play the sound effect
    };

    component && component.addEventListener("click", handleClick); //  once the component has been rendered and saved to a variable, add the EventListener

    return () => {
      component && component.removeEventListener("click", handleClick); //  if the component is removed, remove the EventListener
    };
  }, [component]);

  return (
    <div
      style={{ width: "100vw", height: "100vh" }} //  adding the styling ensures that our component will cover the entire viewport
      ref={(el) => (component = el)} // save the rendered element to a ref variable we can manipulate
    />
  );
};

export default MyComponent;

Nyní, abyste zjistili, odkud zvuk přichází , potřebujeme provést několik jednoduchých výpočtů na základě souřadnic kurzoru ve vztahu k šířce komponenty. Uděláme to přidáním následující funkce na začátek useEffect zpětné volání.

const getStereoBias = (mouseX) => {
    const w = component.clientWidth; // grab the component's width
    const bias = -((Math.round(w / 2) - mouseX) / w) * 2; // calculate a value of -1 to 1 based on the cursor position within the component
    return bias;
  };

A nakonec tuto funkci použijeme vždy, když je generován zvukový efekt, který řekne Howler odkud zvuk přichází úpravou handleClick fungovat následovně.

 const handleClick = (e) => {
    const stereoBias = getStereoBias(e.clientX); //  calculate the "position" of the sound's origin

    const sound = new Howl({ src: mySound, stereo: stereoBias }); // instantiate a new Howl here, passing it the path to our sound effect and stereo bias "position"
    sound.play(); //  as soon as the object is created, we can play the sound effect
  };

A stejně tak, kdykoli se přehraje náš zvukový efekt, bude sledovat kurzor po obrazovce (užitečné pro věci, jako jsou částicové efekty ve hrách)!

Chcete-li si prohlédnout podrobný příklad tohoto konceptu v akci, podívejte se na můj demo projekt Domain Destroyer.

Pokud uděláte něco podobného jako je toto, napište to do komentářů, rád bych viděl, co vymyslíte!