サウンドクラウドを使わないでできる方法がないかなぁ、と思っていたところ、ちょうどいい方法を発見したのでせっかくだからご紹介しちゃいます。
こんなかんじのプレイヤーが簡単に設置できちゃいますよ。
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プレイヤー探してた方はぜひ使ってみてくださいね。
コメント