0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

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

Posted at

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

先日配信をすることになっていろいろ音をいじることになって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アプリだと問題ないかもしれませんが、そもそも再配布可能な音源使いましょう。

スクリーンショット 2023-02-24 12.50.36.png

スクリーンショット 2023-02-24 12.50.44.png

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?