あなたが必要とする効果音の唯一の反応フック

*サウンドエフェクトのための反応フック
ウェブはもっと趣味が必要だ!

👂 あなたのウェブサイトを1つの

の代わりに2つの人間の感覚を使って通信させます

🔥 宣言的なフックAPI

⚡️ <あなたの束の1 KBバイト(gzip)!10 kbのロードされたasync.

✨ タイプスクリプト

で構築

🗣 強力な戦闘を使用してオーディオユーティリティをテスト:ハウラー.JS

インストール

パッケージは、糸を使用して追加できます.

yarn add use-sound

またはNPMを使用します.

npm install use-sound

24679152 .

UNPKG デモ

は、音響効果を見つけて、準備するための指示と同様に多くのデモを含みます.それは出発する絶好の場所です.
また、簡単な例がたくさん含まれているThe tutorialすることができます.
view the storybook
この本を入手してください:

反応フックのコレクション 再生音をクリック

import useSound from 'use-sound';

import boopSfx from '../../sounds/boop.mp3';

const BoopButton = () => {
  const [play] = useSound(boopSfx);

  return <button onClick={play}>Boop!</button>;
};

ホバーで遊ぶ

このデモは、要素の上にホバリング中に音を再生します.マウスが要素を離れると、サウンドが一時停止します.

NOTE: Many browsers disable sounds until the user has clicked somewhere on the page. If you’re not hearing anything with this example, try clicking anywhere and trying again.

import useSound from 'use-sound';

import fanfareSfx from '../../sounds/fanfare.mp3';

const FanfareButton = () => {
  const [play, { stop }] = useSound(fanfareSfx);

  return (
    <button onMouseEnter={play} onMouseLeave={stop}>
      <span role="img" aria-label="trumpet">
        🎺
      </span>
    </button>
  );
};

すべてのクリックでピッチを増やす

PlayBackrateオプションを使用すると、サンプルの速度/ピッチを変更することができます.この例はサウンドを再生し、毎回10 %速くなります.

import useSound from 'use-sound';

import glugSfx from '../../sounds/glug.mp3';

export const RisingPitch = () => {
  const [playbackRate, setPlaybackRate] = React.useState(0.75);

  const [play] = useSound(glugSfx, {
    playbackRate,
    // `interrupt` ensures that if the sound starts again before it's
    // ended, it will truncate it. Otherwise, the sound can overlap.
    interrupt: true,
  });

  const handleClick = () => {
    setPlaybackRate(playbackRate + 0.1);
    play();
  };

  return (
    <Button onClick={handleClick}>
      <span role="img" aria-label="Person with lines near mouth">
        🗣
      </span>
    </Button>
  );
};

APIドキュメント

USESoundフックは2つの引数をとります:

は、それが

を動かす音へのURLです

Configオブジェクト( HooOptions )
2つの値を持つ配列を生成します.

あなたが音

を引き起こすために呼び出すことができる機能

追加のデータとコントロールを持つオブジェクト
サウンドを再生する関数を呼び出すときは、オプション(PlayOptions)のセットを渡すことができます.
順番にこれらの各々を通して行きましょう.

フッオプション

USESoundを呼び出すとき、さまざまなオプションを渡すことができます.
指定された

巻は0から1までの数です、そこで、1は完全なボリュームです、そして、0はみだらにミュートされます.

Playbackrateは、0.5から4までの数です.これは、低速またはサンプルをスピードアップするために使用することができます.ターンテーブルのように、速度への変更もピッチに影響します.

割り込みは、サウンドが終了する前に再生機能が再び呼び出された場合、サウンドが「重なっている」かどうかを指定します.

Soundenabledは、すべての音をミュートするために値(一般的にコンテキストやreduxまたは何か)を渡すことができます.これはPlayOptionsで上書きすることができます.

スプライトでは、複数のサウンドエフェクトのための単一のUSESoundフックを使用することができます.下記の を見てください.

[委任]は、hookoptionsで渡すどんな追加引数もHOWLコンストラクタに転送されるという事実を参照します.詳細は以下の「エスケープハッチ」を見てください.

スプライト 遊び機能

フックを呼び出すとき、タプルの最初の項目としてplay関数を返します.

const [play] = useSound('/meow.mp3');
//      ^ What we're talking about

サウンドをトリガーしたい場合は、この関数を引数なしで呼び出すことができます.PlayOptionsオブジェクトを呼び出すこともできます.
この関数は次のようになります.
スプライト識別のために

IDが使用されます.下記の を見てください.

ForceNoundenabledは、hookoptionsに渡されたSoundenabled Booleanをオーバーライドすることができます.一般的にこれをしたくない.私が見つけた唯一の例外:“ミュート”ボタンの音をトリガ.

PlayBackRateは、新しい再生レートを設定することができます別の方法です.一般に、あなたはhookoptionsでそれをするほうがよいです、これはエスケープハッチです.

スプライト データを出力する

フックは2つのオプション、遊び関数、およびExposedDataオブジェクトを持つタプルを生成します.

const [play, exposedData] = useSound('/meow.mp3');
//                ^ What we're talking about

NamDeclarestOpfunction (( id ?: string )=> void ) PauseFunction (( id ?: string )>> void ) playplaybooleand urationnumber (またはNULL )

ストップはあなたが音を事前に停止するために使用できる機能です.

それが同じ点から再開されることができる以外に、

一時停止は停止のようです.あなたが再開することを知っていない限り、停止を使用する必要がありますそれはいくつかの時点で再開することを期待しているので、一時停止豚のリソース.

iSpring場合は、このサウンドが現在遊んでいるかどうか知っていることができます.ときに音が最後に到達したり、停止したり停止して中断され、この値がfalseに反転されます.サウンドが再生されている間だけ、いくつかのUIを表示するためにこれを使用することができます.

期間は、ミリ秒単位でサンプルの長さです.サンプルが読み込まれるまではNULLになります.スプライトの場合、ファイル全体の長さです.

音は、エスケープハッチです.これは、基になるハウルインスタンスへのアクセスを許可します.それを使用する方法についての詳細を学ぶために を参照してください.コンポーネントがマウントされた後の最初の数回はNULLになります.

ハウラー文書 上級

スプライト

オーディオスプライトは、複数のサンプルを保持する単一のオーディオファイルです.代わりに、多くの個々のサウンドをロードすると、単一のファイルを読み込むことができますし、独立して起動することができます複数のセクションにそれをスライス.

There can be a performance benefit to this, since it’s less parallel network requests, but it can also be worth doing this if a single component needs multiple samples. See the Drum Machine story for an example.

スプライトについては、spritemapを定義する必要があります.次のようになります.

const spriteMap = {
  laser: [0, 300],
  explosion: [1000, 300],
  meow: [2000, 75],
};

Spritemapはオブジェクトです.キーは個々の音のIDです.値は2つの項目を持つタプル(固定長の配列)です.

サンプル240079182の非常に最初から数えたミリ秒単位の開始時間

ミリ秒でサンプルの長さ.

この可視化はより明確になるかもしれません.

私たちは、私たちのShoriteMapを我々のhoOptionsの1つとして渡すことができます:

const [play] = useSound('/path/to/sprite.mp3', {
  sprite: {
    laser: [0, 300],
    explosion: [1000, 300],
    meow: [2000, 75],
  },
});

特定のスプライトを再生するには、play関数を呼び出すときにidを渡します.

<button
  onClick={() => play({id: 'laser'})}
>

エスケープハッチ

ハウラーは非常に強力なライブラリです、そして、我々はそれがusesoundでできることの小さいスライスを露出しただけでした.我々は、より多くの制御を与える2つのエスケープハッチを公開します.
最初に、hookoptionsに渡すどんな認識されていないオプションもHOWLに委任されます.あなたはハウラードキュメントのオプションの を見ることができます.ここでは、サウンドを止めるときにonendを使って関数を起動する方法を示します.

const [play] = useSound('/thing.mp3', {
  onend: () => {
    console.info('Sound ended!');
  },
});

より多くのコントロールが必要な場合は、直接HowlerのインスタンスであるSoundオブジェクトを使用する必要があります.
例えば:ハウラーfull list、それはあなたのサウンドをフェードアウトまたはアウトすることができます.このメソッドを直接サウンドオブジェクトに呼び出すことができます.

const Arcade = () => {
  const [play, { sound }] = useSound('/win-theme.mp3');

  return (
    <button
      onClick={() => {
        // You win! Fade in the victory theme
        sound.fade(0, 1, 1000);
      }}
    >
      Click to win
    </button>
  );
};

学習のための追加リソース
exposes a fade method
React Hooks Video Player
ギタブ:React — The Complete Guide (incl Hooks, React Router, Redux)