自作効果音アプリ作ってみた

先日配信をすることになっていろいろ音をいじることになってWebアプリ作って配信しました。
音源Aを流しながら、音源Bのポン出ししたり（このときAは再生したまま）などの要件があったので自分で作った次第です。

流れ

html書く
netlifyにフォルダごとデプロイ

Netlifyじゃなくてもいいので「html ホスティング無料」とかでぐぐるとよいと思います。

html部分

フォルダ構成

yk@yk music % tree
.
├── assets
│   └── 和太鼓でドン.mp3
├── index.html

html部分

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ポン出しアプリ</title>
</head>

<body>
    <div id="app">
        <p>
            和太鼓でドン
        </p>
        <audio src="./assets/和太鼓でドン.mp3" controls></audio>
    </div>
</body>

</html>

以上で完成。

今回例で効果音ラボさんの和太鼓でどんを使おうとしたのですが、再配布禁止だったので誰でもアクセスできる状態のWebアプリでの作成だと使えないみたいでした。

利用規約
再配布に該当するケース
例1）効果音を自由に鳴らせるアプリを作る（効果音集的なもの）

というかそもそも編集自由なポン出しアプリを作られていることに気づきました。
https://soundeffect-lab.info/pon/app.html

Netlifyのproプラン以上だとベーシック認証付けられるので、ID・PASS認証により自分しか絶対にアクセスできない私的利用状態でのWebアプリだと問題ないかもしれませんが、そもそも再配布可能な音源使いましょう。

自作ポン出しWebアプリを5分で作る

自作効果音アプリ作ってみた

流れ

html部分