Codepenの無料プランで音声ファイルやTone.jsを利用する方法

Tone.jsを紹介するにあたり、Codepenで音声を利用するには如何様にすれば良いか悩んでいたが、解決できたので紹介。

音声の読み込み

下記のページで大体の方法は記載されていました。

■CodePenでDropbox内の画像ファイルを利用する方法
https://qiita.com/tomosuto/items/d3ad063ae41db86aaf60

音声ファイルも同様に、dropboxにアップロード後は、以下の手順でアクセスすることができました。

・dropboxのファイルの「共有」＞「リンクを作成」＞「リンクをコピー」
→コピーしたリンクの「www」→「dl」に変更することでアクセスが可能。

例：

https://www.dropbox.com/s/k3i7qqde16b0oul/pianoBGM.mp3?dl=0″

↓

https://dl.dropbox.com/s/k3i7qqde16b0oul/pianoBGM.mp3?dl=0″

Tone.jsの読み込み

Tone.jsに限らず、CDN形式が無い場合のjsライブラリをCodepen内で取得する際の方法です。

下記を参照に解決できました。

■実はスゴイ「CodePen」の隠れた必殺機能の使い方をまとめてみた！

http://webhacck.net/archives/2195479.html

CodePenでは、自分で作成したpenをライブラリとして読み込むこともできます。

そこで、自分で新しいpenを作成後、ライブラリのソースをコピペして保存します。

すると、ライブラリと同様のCodepenが完成します。

後は、自分が作成したpenのURLをコピーして、①「Settings」→②「JavaScript」→③「URLの貼り付け」を行い、Save＆Closeをクリックしてください。

これで、ライブラリを読み込むことが出来ます。

Codepen内のHTMLの記述から読み込みを行いたい場合には、以下のように、penのURLの末尾に「.js」と追記することで、読み込みが可能です。

実例

最終的に、実装したCodepenは下記です。

See the Pen RddGWL by yoneshi (@yoneshi) on CodePen.

無料でも簡単にファイルにアクセスできるので、気になった方は試してみてください。