- ブログで音楽を活用する重要性について
- 音声ファイルをブログに埋め込む方法
- 異なるプラットフォームでのMP3ファイル再生方法について
- 結論: ブログに音楽を追加することの利点と総括
- 埋め込み例（多すぎ？（;＾△＾）
ブログに音楽を埋め込む方法を詳しく解説。DropboxなどのクラウドドライブやYoutube等を利用した音声ファイルの埋め込みから、ブログ記事内でのプレイヤー設置まで、手順をPREP法で*1 分かりやすく説明します。
ブログで音楽を活用する重要性について
音楽はブログの魅力を高め、読者に新しい体験を提供する優れた方法です。また音楽は感情を表現し、記事の雰囲気を醸し出すのに役立ちます。
音声ファイルをブログに埋め込む方法
クラウドサービスを利用する
ブログに音楽を埋め込む最初のステップは、音声ファイルをホスティングすることです。音声ファイルをクラウド上にアップロードすることで、それをブログ記事に埋め込むことができます。
「ホスティング」とは、一言で表すと「サーバを借りること」です。
レンタルサーバーと呼ばれることもあります。もう少し詳しく説明すると、インターネットサービスプロバイダが顧客にサーバーを貸し付ける契約をし、そこにメールサービスやウェブサービスを預けておくことを言います。
使いやすいDropboxを例に説明します。
一般的なクラウドサービスには、Google Drive、Dropbox、Amazon S3、SoundCloudなどがあります。選択したクラウドサービスにアカウントを作成して利用します。
- Dropboxにログインし、音声ファイルをアップロードします。
- アップロード後、ファイルを右クリックしリンクをコピーを選択します。
- このようなアドレスがクリップボードにコピーされます。
https://www.dropbox.com/scl/fi/mkyti9icm95hwl7hlixpt/Good_Morning_Sky_.mp3?rlkey=fjdo4rfx9bj4gs2pgtl68b99y&dl=0
- コピーしたURLを任意の場所に貼り付けておく。
いったんここまでで、次のステップへ―
ブログ記事中に音声プレイヤーを埋め込む手順
以下のステップで実現できます：
- ブログ記事の編集モードで、音声ファイルを表示したい場所にカーソルを移動します。
- カーソルを配置したい場所でHTMLまたは埋め込みコードを挿入します。
-
音声プレイヤーを表示するためのコードは、HTML5の<audio>要素を使用します。
<audio src="先ほどコピーしたリンクのURL" controls="controls"> </audio> -
埋め込むために、さきほどのコピーしたコードに少し修正を加えます。
https://www.dropbox.com/scl/fi/mkyti9icm95hwl7hlixpt/Good_Morning_Sky_.mp3?rlkey=fjdo4rfx9bj4gs2pgtl68b99y&dl=0
・ひとつは、dropboxの部分をdl.dropboxusercontentと書き換えます。
https://www.dropbox.com/~
https://dl.dropboxusercontent.com/~
・もう一か所は、URL後ろのパラメータ部分、『dl=0』を削除します。
https://www.dropbox.com/scl/fi/mkyti9icm95hwl7hlixpt/Good_Morning_Sky_.mp3?rlkey=fjdo4rfx9bj4gs2pgtl68b99y&dl=0 - 最終的なコードはこうなります。
<audio src="https://dl.dropboxusercontent.com/scl/fi/mkyti9icm95hwl7hlixpt/Good_Morning_Sky_.mp3?rlkey=fjdo4rfx9bj4gs2pgtl68b99y" controls="controls"> </audio>
©good morning sky Long ver @Isao Yamaguchi
これで音声プレイヤーの埋め込み手順は終了です。
HTML5の<audio>要素で提供される追加のプロパティ
このままでも再生は可能ですが、プロパティを追加することでユーザーエクスペリエンスが高まります。
- controls：オーディオプレイヤーのコントロールバーを表示
- autoplay：自動再生
- loop：繰り返し再生
- preload：音声データの事前読み込みを制御
preload属性に指定できる値は、以下の4つです。
※autoplayを指定していると、preloadの値は無視されます。
auto: ブラウザによる自動的な事前読み込みを許可します。
metadata: メタデータ（例：音声の長さなど）のみを読み込みます。
none: 事前読み込みを無効にします。
空の値（""または未指定）: ブラウザのデフォルトの動作を使用します。
たとえばpreload="auto"と記述した場合、ブラウザは音声ファイルを自動的に事前読み込みします。 - muted：音声をミュート
コンテンツの管理や保護、マーケティング戦略に関するプロパティ
さらにcontrolslistとoncontextmenuというプロパティについて説明します。
- controlslist
オーディオコンテンツのセキュリティに役立ちます。これを使用すると、ダウンロードボタンを非表示にすることができ、オーディオコンテンツの不正利用や無許可のダウンロードを防ぐことができます。これはオーナー側の利益や著作権の保護に寄与することが期待されます。 - oncontextmenu
要素上で右クリックしたときに表示されるコンテキストメニューを制御します。これを使用すると、右クリックを無効にすることができ、特定のユーザーエクスペリエンスを提供できます。つまり、コンテキストメニューをカスタマイズしてコンテンツを保護し、読者を誘導することを可能にします。これはサイトオーナーのコンテンツ・マーケティング戦略をサポートする役割を果たします。
具体的な適用値について
- controlslist="nodownload"
オーディオプレイヤーのコントロールバーにダウンロード（保存）ボタンを表示しなくするために使用されます。これにより、ユーザーは音声ファイルをダウンロードできなくなり、セキュリティやコンテンツ保護に役立ちます。 - oncontextmenu="return false;"
要素上で右クリックしたときにデフォルトのコンテキストメニューを無効にします。これにより、ユーザーが音声プレイヤー上で右クリックしても、カスタムのコンテキストメニューが表示されず、何も起こりません。これはコンテンツの保護やユーザーエクスペリエンスの制御に使用され、不正利用や無許可の操作を防ぐのに役立ちます。
実際の適用例はこちら
このオーディオプレイヤーは下記のコードで表示されています。
<audio src="https://dl.dropboxusercontent.com/scl/fi/mkyti9icm95hwl7hlixpt/Good_Morning_Sky_.mp3?rlkey=fjdo4rfx9bj4gs2pgtl68b99y" controls="controls" autoplay="autoplay" loop="loop" muted="" controlslist="nodownload" oncontextmenu="return false;"> </audio>
異なるプラットフォームでのMP3ファイル再生方法について
今回は はてなブログ環境での作業説明となりましたが、WordpressやBloggerなど、MP3ファイルを再生する具体的な手法は若干異なります。
基本的な構造は変わらない印象ですが、当方で検証しておりませんので、主要な各プラットフォームでの設定方法についてはまた追って、詳しい説明を追記予定です。
結論: ブログに音楽を追加することの利点と総括
音楽はブログを魅力的にし、読者の関心を引く力を持っています。
記事内で音楽を適切に活用すれば、読者のエンゲージメントを高め、情報を伝える効果を向上させることができます。
埋め込み例（多すぎ？（;＾△＾）
ここをクリック！
Please enjoy watching~
©good morning sky Long ver @Isao Yamaguchi
ちなみに気になる著作権について。
ブログに動画を埋め込むことは著作権的には問題はありません。ただし、動画だけを埋め込んだだけでアクセスを稼ぐ「バイラルサイト」は 商用目的に払拭する可能性があります（グレーゾーン）。
だからといってかたっぱしからバシバシ!貼り付けるのも、いかがなものか…ですが(^▽^;)爆
