iPhoneも表示できる!ブログやホームページにMP3プレイヤーを埋め込む方法

ブログに音声データを貼り付けたいとき、いい方法がなくてお困りじゃありませんか?


サウンドクラウドを使わないでできる方法がないかなぁ、と思っていたところ、ちょうどいい方法を発見したのでせっかくだからご紹介しちゃいます。



こんなかんじのプレイヤーが簡単に設置できちゃいますよ。

HTML5のaudio要素


とっても画期的な「audio要素」という記述でMP3プレイヤーを埋め込むことができます。何が画期的って、フラッシュやプラグインを使わないのでiPhoneでも表示できることがかなりデカい。

audio要素とは?
HTMLというWEBページを構築する言語はみなさんなんとなく知ってるかと思います。
このHTMLの最新バージョンであるHTML5から登場した要素で、その名の通りページ上でオーディオファイルを再生させることが可能です。
(古いバージョンのブラウザでは対応していない場合もあります)

対応しているファイル形式
MP3/WAV/AAC/OGG

など。ブラウザにより対応フォーマットが違う場合も。


「この時点でよくわからん」って人も、よく読んでもらえればそんなに難しくないので。笑


使い方


とってもシンプル。

<audio src="music.mp3" controls></audio>

赤字の部分は対象のファイルのURLに書き換えてあげればOK。
こんな感じで表示されます。



シンプルだしデバイスを選ばないので、非常にいい感じ。

アップロードする場所について


自分のホームページやサイト用にサーバーをレンタルしてる人は、もちろんそこを使えばOK。

でも、ブログサービスのみ(はてなブログとかlivedoorブログ、FC2ブログ、bloggerなど)を使ってる人でデータをアップロードできるようなサーバーを持ってない人ちょっと困っちゃいますよね。

でも大丈夫です、いろいろ方法あります。

Dropboxでデータ共有


業界シェアNo.1っぽいクラウドストレージ「Dropbox」。これを使えばアップロードできちゃいます。
無料登録でも2GBの容量をもらえるので、MP3保管するくらいならぜんぜん余裕。

有料プラン使ってる人なら1TBとか使えちゃうので、Soundcloudよりも大量にアップロード可能です。笑

Dropbox内には「Public」というフォルダがもともとあるので、そこに対象のファイルをアップロード。


ドラッグ&ドロップでOK。とっても簡単です。

ちなみに僕はデータを整理するために「Public」フォルダ内に「audio」ってフォルダを作ってそこにアップしてます。

「Public」フォルダ直ブッコミでもOKだし、僕みたいに別のフォルダを作ってその中に入れても平気です。


アップロードが完了したら、ファイルを選択すると「公開リンクをコピー」という項目が表示されるのでクリック。

こんな感じでリンクをコピーしたら、あとはペーストするだけ。
<audio src="https://dl.dropboxusercontent.com/u/〜◯◯◯.mp3" controls></audio>

こんな感じで赤字の部分をクリップボードからコピーしたURLに書き換えてあげればOK。

これだけ。

Google Driveでデータ共有



Googleの無料で使えるクラウドストレージ「Google Drive」を使えばバッチリ。
こちらは無料登録でも15GB。かなり余裕がありますね。


自分のドライブにアクセスしたら、データはデスクトップからドラッグ&ドロップでアップロード可能。すごい便利。


メニュー表示で「共有可能なリンクを取得」をクリック。


これでこのデータはリンクの共有ができます。
この時点でURLもクリップボードにコピーされているので、あとはペーストするのみ。
<audio src="https://drive.google.com/◯◯◯.mp3" controls></audio>

こんな感じで赤字の部分をクリップボードからコピーしたURLに書き換えてあげればOK。

これだけ。
後半デジャブっぽい。

その他のストレージサービスでもいけるっぽい


試してないけどAmazon Driveとかみたいな他のクラウドストレージサービスでもいけるっぽいので、どれかしら登録してる人はまずはお試しあれ。

おわりに


サウンドクラウドならアップロードしてペタッと貼り付けられるけど、それだとアップロード可能時間を圧迫しちゃうし、なによりポートフォリオとして使いたいからブログの解説用に使うオーディオデータとかはサウンドクラウドにはあげたくないんだよなぁ。って僕自身もずっと思ってまして。

なんかいい方法ないかなーと思ってたけど、こんな簡単だったとは。
もっと早く使えばよかった。。

ブログやホームページに埋め込むMP3プレイヤー探してた方はぜひ使ってみてくださいね。
それでは今回はこの辺で。



音楽制作についてのご相談・ご依頼や、音楽をテーマにした記事執筆のご依頼などのお問い合せはこちらへどうぞ。

プロフィールはこちら

ブログの更新状況・新曲の投稿・その他近況などなどつぶやいております。
質問や相談、お問い合わせなどもお気軽にリプライやDMからどうぞ。


0 件のコメント :

コメントを投稿