承認これくしょん

my black histories

椅子取りゲーム用の音楽プレイヤーを作った

JavaScript

概要

ブラウザ上に音楽ファイルをドロップするとメニューが出る。
そこで指定した秒数の範囲内で乱数を生成して、イントロからその分だけ再生するやつ。
HTML5のDrag and Drop APIとFile APIのテスト。
デモ

コード

chairs.html

<!DOCTYPE html>
<html>
    <head>
       <meta charset="utf-8">
       <script src="chairs.js"></script>
   </head>
    <body>
        <h1>椅子取りゲーム</h1>
        <div id="description" style="display:block;">音楽ファイルをドロップ</div>
        <div id="player" style="display:none;">
            最小秒数<input id="min" type="text" size="1" value="1"><br>
            最大秒数<input id="max" type="text" size="1" value="5"><button id="play" type="button">スタート</button>
        </div>
    </body>
</html>

chairs.js

window.onload = function() {
    var bgm;
    document.addEventListener("dragover", function(e) {
        e.preventDefault();
    });
    document.addEventListener("drop", function(e) {
        e.preventDefault();
        var file = e.dataTransfer.files[0];
        var reader = new FileReader();
        reader.onload = function(e) {
            bgm = new Audio(e.target.result);
            document.getElementById("description").style.display = "none";
            document.getElementById("player").style.display = "block";
        }
        reader.readAsDataURL(file);
    });
    document.getElementById("play").addEventListener("click", function(e) {
        bgm.play();
        var sec = Math.random() * (document.getElementById("max").value - document.getElementById("min").value) + Number(document.getElementById("min").value);
        setTimeout(function() {
            bgm.pause();
            bgm.currentTime = 0;
        }, sec * 1000);
    })
}

所感

dragoverをキャンセルしないとページ遷移する
readAsDataURLはBase64文字列化して返すやつなので、でかいファイルを読み込むと固まります
そもそも椅子取りゲームにパソコン使わない