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

soundfile-min

「音声ファイルを記事に埋め込みたい」と思ったことはありますか?

BGMだったり、効果音だったり、人の声だったり。音楽に関連するブログであればなおさらです。

実はWordPress3.6から音声ファイルの埋め込みが可能になりました。早速試してみましたのでご覧下さい。

目次

「音声ファイル」リンク

対応しているファイル形式は以下になります。

  • MP3
  • WAV
  • OGG
  • M4A
  • WMA

このように主要な音声ファイルはほぼ対応しているようです。今回はMP3ファイルを埋め込んでみました。

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

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

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

soundfile2-min

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

soundfile3-min

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

「音声ファイル」埋め込む

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

soundfile4-min

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

<audio src=”音声ファイルURL” controls=”controls”></audio>

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

音声プレイリスト

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

soundfile5-min

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

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

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

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

ジョン齊藤のアバター ジョン齊藤 ブログ運営者 / 執筆者

ブログ歴7年 / 10万PV達成 / ブログの戦闘力を高める・Webマーケティング / 使用テーマSWELL

コメント

コメントする

目次
閉じる