js
programming
study

音楽野郎の作って勉強するクソ雑JavaScript Op.01 〜ハンドベル編〜

説明

当職はHTMLはちょっと書けるけどJSはあまり触れたことがない。
ガシガシ書きながら覚えてやるぜ。という意気込み。
勉強のメモとしての記事であるため,間違いや思い込み,目を瞑る部分多数。
プロの手ほどき記事ではないので,あしからず。

方針

とりあえず,スマホ振ったら「こ〜ん」って音がなるものをつくる。
要するにハンドベル。

一日目

htmlの中にJSの<script>をぶちこんでいく。
最初にするのはHTML5のAudioエレメントをつかって「音を出す」ところ。
適当なハンドベル音をmp3で用意した。こ↑こ↓を参照

index.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <title>multi media</title>
    <script>
      window.addEventListener("load", function(){

        if (!HTMLAudioElement){
          return;
        }

        var audio = document.getElementById("audio");

        document.getElementById("play").addEventListener("click", function(){
          audio.play();
        }, true);

        document.getElementById("stop").addEventListener("click", function(){
          audio.pause();
        }, true);

        document.getElementById("back").addEventListener("click", function(){
          audio.currentTime=0;
          audio.pause();
        }, true);

        document.getElementById("refrain").addEventListener("click", function(){
          audio.pause();
          audio.currentTime=0;
          audio.play();
        }, true);
      }, true);
    </script>
  </head>
  <body>
    <audio id="audio" preload>
      <source src="bell_c.mp3">
       <p>HTML5 Audioがつかえません。</p>
    </audio>
    <div>
      <input type="button" id="play" value="再生">
      <input type="button" id="stop" value="停止">
      <input type="button" id="back" value="戻る">
      <input type="button" id="refrain" value="止まるんじゃねぇぞ">
    </div>
  </body>
</html>

まず,<meta>のviewpointでcontent="user-scalable=no"を指定し,スマホ画面でボタンを連打してもピンチしないように設定。
そしてあとは参照元を丸コピー。
"止まるんじゃねぇぞ"だけはちょっと改造し,叩く度に音を止め,最初から再生し直すように設定。うまくいった。
この時点でてっぺん超えたので,明日に回す。
明日は加速度を取ってみる。

二日目

やってます。