Codepenの無料プランで音声ファイルやTone.jsを利用する方法
- 2019.03.27
- javascript
- 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」と追記することで、読み込みが可能です。
1 |
<script src="https://codepen.io/user/pen/penname.js"></script> |
実例
最終的に、実装したCodepenは下記です。
See the Pen RddGWL by yoneshi (@yoneshi) on CodePen.
無料でも簡単にファイルにアクセスできるので、気になった方は試してみてください。
-
前の記事
記事がありません
-
次の記事
javascriptで配列の値をランダムに取得し、表示する 2019.04.05