GatsbyJSでgatsby-remark-audioプラグインを使う

gatsby-remark-audio とは

Gatsby.jsで、markdownファイルの中にオーディオファイルを置けるプラグイン
マークダウンの中で `audio: <URL>` と書くと、 HTMLの<audio>タグに変換してくれる

公式はここ: https://www.gatsbyjs.org/packages/gatsby-remark-audio/

こんな感じになるよ

使い方

1. npmかyarnでインストールする
2. gatsby-config.jsをいじる
3. 音声ファイルを/staticディレクトリ下に置く
4. マークダウンの中で audio: /bar.wavみたいに書く

1. パッケージのインストール

npmまたはyarnを使って入れます
プロジェクトで使ってる方にあわせてね

npm install gatsby-remark-audio
または
yarn add gatsby-remark-audio

2. gatsby-config.jsをいじる

このプラグインに限らずGatsby.jsのプラグインでは、インストールしたあとにgatsby-config.jsを書き換えます
gatsby-config.jsはgatsbyプロジェクトがあるディレクトリのルート直下にあります (package.jsonとかと同じとこ）

書き換える内容は下のとおりで、

• pluginsの下の
• gatsby-transformer-remarkの下の
• pluginsの下に

gatsby-remark-audioの設定をかきます

gatsby-config.js

module.exports = {
  // 省略
  plugins: [
    // 省略
    {
      resolve: `gatsby-transformer-remark`,
      options: {
        plugins: [
          {
            resolve: "gatsby-remark-audio",
            options: {
              preload: "auto",
              loop: false,
              controls: true,
              muted: false,
              autoplay: false,
            },
          },
        ],
      },
    },
    // 省略
  ],
}

もしプラグインが読み込めてなかったら、↓をかくにんしてみてね

• pluginの中にまたpluginがあったりするので、ネストをミスってないか
• すでにgatsby-transformer-remarkが入ってたら、↑のコードに変える

3. 音声ファイルを追加する

/staticディレクトリの中に直接ぶちこみます
入れたあとのプロジェクトのディレクトリ構造はこんなかんじ↓

my-gatsby-project
┗ public
┗ src
  ┗ pages  ┗ components
  ┗ templates
  # その他ソースコード
┗ static
  ┗ foo.wav # 追加した音声ファイル
┗ package.json
┗ gatsby-config.js

4. マークダウンの中でaudioコードを書く

書き方は
`audio: <URL>`

例えばこう↓

# みだし

これはWAVファイルです

`audio: /foo.wav`
`audio: https://fairu-hosuto.com/hoge.mp3`

音声を/staticフォルダの中に入れた場合はURLのとこを /<ファイル名>にします
外部サイトとかのURLだったら、そのままいれる

/staticの中にあるけど、マークダウンの中のファイル名は/で始まるので注意です

まとめ

• gatsby-remark-audioはマークダウンから<audio>タグをつくってくれる
• 公式docs: https://www.gatsbyjs.org/packages/gatsby-remark-audio/