React+TypeScript+Next.jsのWebアプリからBGM/サウンド音を鳴らす方法とエラーの解決方法【use-sound】
目次
こんにちは。
今回はReactアプリで簡単に音を鳴らす方法としてuse-soundなるパッケージをご紹介します。
私はTypeScriptとNext.jsでアプリケーションを作っているのですが、いくつかuse-soundの使用にあたりエラーに遭遇したので、その解決策もまとめておきます。
これでキミもブラウザから爆音を鳴らせるぞ！(?)
前提のツール
- TypeScript
- JavaScriptに型定義をできるようにした言語
- React
- JavaScriptで動く色々なUI機能が簡単に開発できるライブラリ
- Next.js
- Reactベースのフロントエンド開発フレームワーク
このブログもNext.js+TypeScriptで構築しています
use-soundとは
React hooksとしてWAVやMP3など音楽ファイルの再生や停止が簡単にできるパッケージ。
https://www.npmjs.com/package/use-sound
もちろんSE(サウンドエフェクト)だけでなくBGMの再生にも使えます。webブラウザベースのアプリケーションで音を鳴らしたいときに使えそうです。
use-soundの使い方
soundtest.tsxに以下の内容を書きます。これがアプリケーション本体です。
再生するMP3ファイルはどこに置いてもいいですが、今回は同じディレクトリにsound/se.mp3を置きます。
import { Button } from 'react-bootstrap';
import useSound from 'use-sound'
import sound from './sound/se.mp3'
export default function App() {
const [play, { stop, pause }] = useSound(sound);
return (
<>
<Button onClick={() => play()}>Play</Button>
<Button onClick={() => stop()}>Stop</Button>
<Button onClick={() => pause()}>Pause</Button>
</>
)
}
ボタンが3つ並んで、それぞれを押すと再生、停止、一時停止ができます。簡単ですね。
コードもシンプルです。
MP3ファイルのimportでTypeScriptの型宣言エラーが出る場合の対処法
このようなエラーが出た場合
モジュール './sound/se.mp3' またはそれに対応する型宣言が見つかりません。
場所はどこでもいいのでsound.d.tsというファイルを作って以下の1行を書いておくとエラーが消えます。
declare module '*.mp3';
一応、ルートディレクトリにtypes/というディレクトリを作ってその中に置きました。
【Next.js】MP3ファイルのインポートでパースエラーが出る場合の対処法
型エラーはなくなりましたが、このようなエラーが出てしまいました。
./sound/se.mp3 1:0 Module parse failed: Unexpected character '�' (1:0) You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders (Source code omitted for this binary file)
Module parse failedということで何やらMP3ファイルのパースができていないみたいです。
対策として、まずはパースに必要なローダーのパッケージをインストールします。
npm install url-loader file-loader
次にプロジェクトのルートディレクトリにnext.config.jsというファイルを作成し、以下の内容を記載してMP3ファイルやWAVファイルをimportする際のローダーを指定します。
注意: TypeScript化していてもファイル拡張子は.tsではなく.jsで作ります。
module.exports = {
webpack(config, options) {
const { isServer } = options;
config.module.rules.push({
test: /\.(mp3|wav)$/i,
exclude: config.exclude,
use: [
{
loader: require.resolve('url-loader'),
options: {
limit: config.inlineImageLimit,
fallback: require.resolve('file-loader'),
publicPath: `${config.assetPrefix}/_next/static/images/`,
outputPath: `${isServer ? '../' : ''}static/images/`,
name: '[name]-[hash].[ext]',
esModule: config.esModule || false,
},
},
],
});
return config;
},
};
以上の変更を終えたらnpm run devをやり直すと、localhostで立ち上がっているアプリケーションに変更が反映されます。next.config.jsはサーバーのビルドフェーズで使われるファイルのため、再起動が必要です。
これで無事にNext.jsのエラーが解決してMP3ファイルがインポートできました！
まとめ
というわけで、TypeScript + React + Next.jsを使ったアプリケーションで簡単にサウンドを鳴らす方法と遭遇したエラーの対処方法をまとめてみました。
ご参考まで。
それでは〜
