「MP3、WAV」WordPressで音声ファイルをWEBページ上に埋め込む方法

サイトを運営していて音声ファイルをコンテンツに埋め込みたい、と思ったことってありませんか？BGMだったり、効果音だったり、人の声だったり。音楽に関するサイトだったらなおさらです。

実はWordPress3.6から音声ファイルが埋め込み可能になったそうなんです。早速試してみましたよ。

「音声ファイル」リンク

対応しているファイル形式はMP3、WAV、OGG、M4A、WMAと主要な音声ファイルはほぼ対応しているようです。今回はMP3ファイルを用意しました。

使い方は簡単です。WordPressのダッシュボード (管理画面) から記事を編集する画面を開きます。

画像ファイルのように「メディアを追加」を選択、そこから「ファイルをアップロード」して追加します。

「投稿に挿入」する前に一番下を「メディアファイルへのリンク」を選んでおきましょう。

これでもお手軽に埋め込むことができるのですがWEBページからリンク先をクリックしてアップロードされたファイルを再生することになってしまうんです。訪問ユーザーからしたらちょっとした手間になります。

今回イメージしていたのはリンクを介さずにWEBページ上で音声ファイルを再生できる方法だったので、違う方法にする必要があるようです。ちなみに「メディアプレイヤーを埋め込む」ではうまくいきませんでした。

この場合自分でちょっとしたコードを追加する必要があります。まずアップロード先の音声ファイルURLをコピーします。

次にこのコードです。このコードの「音声ファイルURL」の位置にさきほどのURLを貼り付けてください。

あとはこのコードを「テキストモード」から追加すればちゃんと表示されるはずです。こちらの音声ファイルを確認してみて下さい。

なんと音声プレイリストまで埋め込むことができるんですね。やり方は先ほどの「メディアを追加」から「音声プレイリストを作成」、事前にいくつかアップロードしておいたリストに加えたい音声ファイルを選択。

「プレイリストを新規作成」→「音声プレイリストを挿入」で埋め込みが完了です。
こんなかんじです。

※再生して放置したままだと繰り返しリピート再生し続けるのでご注意を。

画像だけでなく、動画、GIF、そして今回紹介した音声も扱うとコンテンツの幅がグッと拡がるかもしれませんね。