ブラウザだけで音楽を流してみる | www.yoshiislandblog.net

ブラウザだけで音楽を流してみる

htmlとかよく分からないが、web audio APIを使って音楽を流してみた。






      <!-- Bootstrap core CSS -->
      <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" id="themesid">

      <!-- Custom styles -->
      <link href="https://getbootstrap.com/examples/theme/theme.css" rel="stylesheet">
      <link href="https://getbootstrap.com/dist/css/bootstrap-theme.min.css" rel="stylesheet">
      <link href="https://getbootstrap.com/examples/offcanvas/offcanvas.css" rel="stylesheet">

 </head>

 <body>
      <div class="container">
           <div class="row row-offcanvas row-offcanvas-right">
                <div class="col-xs-12 col-sm-9">
                     <div class="row">

                          <!-- button -->
                          <div class="container theme-showcase" role="main">
                               <p>
                                    <button type="button" class="btn btn-lg btn-primary" id="PlayButton">Play</button>
                               </p>
                          </div>

                     </div>
                </div>
           </div>
      </div>

      <script>


           // defined tone
           var music = [];
           music.push("soo");
           music.push("mii");
           music.push("Doo");
           music.push("so");
           music.push("so");
           music.push("so");
           music.push("la");
           music.push("Doo");
           music.push("faa");
           music.push("laa");
           music.push("soo");

           // defined length of sound
           var time = [];
           time.push(0.7);
           time.push(0.2);
           time.push(0.7);
           time.push(0.2);
           time.push(0.2);
           time.push(0.2);
           time.push(0.2);
           time.push(0.2);
           time.push(0.2);
           time.push(0.2);
           time.push(0.7);


           function play() {

                window.AudioContext = window.AudioContext || window.webkitAudioContext; // cross browser
                var audioCtx = new AudioContext();

                for (key = 0; key < music.length; key++) {

                     // define sound key
                     if(music[key] == "Do"){var hz = 262;}
                     if(music[key] == "re"){var hz = 294;}
                     if(music[key] == "mi"){var hz = 330;}
                     if(music[key] == "fa"){var hz = 349;}
                     if(music[key] == "so"){var hz = 392;}
                     if(music[key] == "la"){var hz = 440;}
                     if(music[key] == "si"){var hz = 494;}
                     if(music[key] == "Doo"){var hz = 523;}
                     if(music[key] == "ree"){var hz = 587;}
                     if(music[key] == "mii"){var hz = 659;}
                     if(music[key] == "faa"){var hz = 699;}
                     if(music[key] == "soo"){var hz = 784;}
                     if(music[key] == "laa"){var hz = 880;}
                     if(music[key] == "sii"){var hz = 988;}

                     // sound play
                     if(hz != "none"){
                          var osciillator = audioCtx.createOscillator();   // sound generate
                          osciillator.frequency.value = hz;   // defined hertz 
                     var audioDestination = audioCtx.destination;   //defined sound output
                     osciillator.connect(audioDestination);   // connect speaker
                     osciillator.start = osciillator.start || osciillator.noteOn; // cross browser
                     osciillator.start();  // start playing
                          osciillator.stop(audioCtx.currentTime + time[key]);   // stop sound after time[key] sec
                     }

                     // sleep between each sound
                     Sleep(time[key]+0.1);

                }
           }

           // sleep function
           function Sleep(T){
              var d1 = new Date().getTime();
              var d2 = new Date().getTime();
              while( d2 < d1+1000*T ){     // wait T sec
                   d2=new Date().getTime();
              }
              return;
           }

           // execution
           var Button1 = document.getElementsByClassName("btn btn-lg btn-primary");
           Button1[0].addEventListener("click", play, false);

      </script>
 </body>

こんな感じのボタンを押すと、音楽が流れる。ブラウザだけで音楽が流せるのは凄いなと感動。
ボタンをこんなにリッチにする必要があったのかとか、これを使って何をするのかとかは検討中。

<!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, user-scalable=no">

          <title>Audio API test</title>

          <!-- Bootstrap core CSS -->
          <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" id="themesid">

          <!-- Custom styles -->
          <link href="https://getbootstrap.com/examples/theme/theme.css" rel="stylesheet">
          <link href="https://getbootstrap.com/dist/css/bootstrap-theme.min.css" rel="stylesheet">
          <link href="https://getbootstrap.com/examples/offcanvas/offcanvas.css" rel="stylesheet">

     </head>

     <body>
          <div class="container">
               <div class="row row-offcanvas row-offcanvas-right">
                    <div class="col-xs-12 col-sm-9">
                         <div class="row">

                              <!-- button -->
                              <div class="container theme-showcase" role="main">
                                   <p>
                                        <button type="button" class="btn btn-lg btn-primary" id="PlayButton">Play</button>
                                   </p>
                              </div>

                         </div>
                    </div>
               </div>
          </div>

          <script>
               function play() {

                    window.AudioContext = window.AudioContext || window.webkitAudioContext; // cross browser
                    var audioCtx = new AudioContext();

          for (key = 0; key < music.length; key++) {

                         // define sound key
                         if(music[key] == "Do"){var hz = 262;}
                         if(music[key] == "re"){var hz = 294;}
                         if(music[key] == "mi"){var hz = 330;}
                         if(music[key] == "fa"){var hz = 349;}
                         if(music[key] == "so"){var hz = 392;}
                         if(music[key] == "la"){var hz = 440;}
                         if(music[key] == "si"){var hz = 494;}
                         if(music[key] == "Doo"){var hz = 523;}
                         if(music[key] == "ree"){var hz = 587;}
                         if(music[key] == "mii"){var hz = 659;}
                         if(music[key] == "faa"){var hz = 699;}
                         if(music[key] == "soo"){var hz = 784;}
                         if(music[key] == "laa"){var hz = 880;}
                         if(music[key] == "sii"){var hz = 988;}

                         // sound play
                         if(hz != "none"){
                              var osciillator = audioCtx.createOscillator();   // sound generate
                              osciillator.frequency.value = hz;   // defined hertz 
                         var audioDestination = audioCtx.destination;   //defined sound output
                         osciillator.connect(audioDestination);   // connect speaker
                         osciillator.start = osciillator.start || osciillator.noteOn; // cross browser
                         osciillator.start();  // start playing
                              osciillator.stop(audioCtx.currentTime + time[key]);   // stop sound after time[key] sec
                         }

                         // sleep between each sound
                         Sleep(time[key]+0.1);

                    }
               }

               // sleep function
               function Sleep(T){
                  var d1 = new Date().getTime();
                  var d2 = new Date().getTime();
                  while( d2 < d1+1000*T ){     // wait T sec
                       d2=new Date().getTime();
                  }
                  return;
               }

               // defined tone
               var music = [];
               music.push("soo");
               music.push("mii");
               music.push("Doo");
               music.push("so");
               music.push("so");
               music.push("so");
               music.push("la");
               music.push("Doo");
               music.push("faa");
               music.push("laa");
               music.push("soo");

               // defined length of sound
               var time = [];
               time.push(0.7);
               time.push(0.2);
               time.push(0.7);
               time.push(0.2);
               time.push(0.2);
               time.push(0.2);
               time.push(0.2);
               time.push(0.2);
               time.push(0.2);
               time.push(0.2);
               time.push(0.7);

               // execution
               var Button1 = document.getElementsByClassName("btn btn-lg btn-primary");
               Button1[0].addEventListener("click", play, false);

          </script>
     </body>
</html>

参考

%d bloggers like this: