こんにちは、しゃーろです。
皆さんは録音するときにどうされていますか？
僕はよく、スマホの録音アプリを使ったりします。
スマホで録音して、その音声ファイルをパソコンに移して…
それか、パソコンについているサウンドレコーダーを使うとか。
ですが、WordPressに音声ファイルを埋め込もうとすると、なぜかそれらの音声ファイルを使用することが出来なくなってしまいました。（昔は使えたと思います）
恐らく、拡張子がmp3と表示されていても、実際には正式なmp3ではない可能性があるからです。
なので、外部のアプリ（Audacity）などをインストールして録音していました。
ただ、簡単なボイスレコーダーならWordpressですぐに作成できることが分かったので、紹介したいと思います。
また、こちらで録音した音声ファイルは、Wordpressで問題なく挿入することができました。
完成形は以下になります。
プラグインを準備
今回のコンテンツ作成は「Interactive Content – H5P」というプラグインを使うので、まずはインストールしていきます。
WordPressのダッシュボードから「プラグイン」→「プラグインを追加」と進み、プラグインの検索欄に「Interactive Content – H5P」と入力します。
こちらをインストール・有効化しましょう。
他にも似たようなプラグインがたくさんあるのですが、今回使っていくのは上画像のものになります。
コンテンツをインストール
プラグインをインストールしたら、Wordpressのダッシュボードから「H5Pコンテンツ」→「新規追加」と進みます。
上のような画面が出てきたら、「I consent, give me the Hub!」をクリックします。
読み込みに多少時間がかかりますが、読み込んだ後は上のようなページが表示されると思います。
一覧の中から「Audio Recorder」を探し、「↓Get」をクリックします
そうしたら、右下の「↓Install」をクリックし、「Use」をクリックします。
ライセンスについては、以下の記事の中で解説しています。
コンテンツを作成して記事に挿入する
「Use」をクリックすると上のような画面になると思うので、タイトルを適当に記入し、「作成」をクリックします。
表示オプションはデフォルトのままで大丈夫です。
左下に表示される「<>埋め込み」をクリックし、表示されたコードをコピーしましょう。
そうしたら、新規投稿画面に移り、カスタムHTMLにコピーしたコードを貼り付けます。
新規投稿の記事編集画面で「+」ボタンをクリックして「カスタムHTML」を挿入します。
そこに先ほどコピーしたコードを貼り付けましょう。
これでボイスレコーダー完成です。
埋め込みコードを表示したくない場合
今のままだと、作成したコンテンツに埋め込みボタンが表示され、誰でもコードをコピーできる状態になります。
これを非表示にする方法があるので紹介します。
まずはコンテンツの編集画面に戻ります。
画面上の「編集」をクリックしましょう。
右側の表示オプションから「コンテンツの下にツールバーを表示」のチェックを外し、「更新」をクリックします。
これで、埋め込みボタンを非表示にすることができます。
ただ、著作権ボタンも一緒に消えてしまうので、クレジット表記は忘れないようにしましょう。
コンテンツに枠をつける方法
僕が作成したレコーダーには、デフォルトではついていない青い枠がついていますよね。
このように枠をつけたいという方もいると思うので、併せて紹介したいと思います。
カスタムHTMLに貼り付けた埋め込みコードを少しだけ編集していきます。
まずは、以下のコードをコピーしてください。
<div style="border: 3px solid #93d2f0; border-radius: 12px; padding: 20px; box-shadow: 0 0 10px rgba(0,0,0,0.1); background: #fff;">
<!-- ここにH5Pの埋め込みコードを貼る -->
</div>このコードをカスタムHTMLに貼り付け、<!– ここにH5Pの埋め込みコードを貼る –>の部分とコンテンツの埋め込みコードを差し替えます。
上のコードで、埋め込みコードを挟む感じですね。
これをすると枠をつけることができます。
ちなみに、色は「#93d2f0」となっていますが、ここはお好みで変更することが可能です。
例えば、「#ccc」とすると灰色になったりします。
まとめ
いかがだったでしょうか。
今回は、Wordpressで簡単にボイスレコーダーを作成する方法を紹介しました。
録音した音声は簡単にダウンロード出来て、ダウンロードした音声ファイルはWordpressにも問題なく挿入できます。（今のところ）
ただ、この音声ファイルはトリミングをしたりすることが出来ないので、長めの録音をして編集したい場合は、やはり外部アプリを使う必要がありますね。
今回紹介したプラグインは、他にもクイズを作ったり色々なことができるので、興味がある方は試してみてください。
この記事が少しでも役に立ったら嬉しいです。
最後まで読んでいただき、ありがとうございました！
