JavaScript/HTML5おぼえがき

JavaScriptJavaScript/HTMLJavaScript/HTML5サイトマップホーム

実行サンプル表示があります。書き方を忘れた場合はサンプルソースを参考にしてください。

■ 入力フォーム 入力フォーム

■ 描画 図形の描画図形のグラテーション画像の描画画像のクリッピング画像の加工(ピクセル操作)画像の保存(その2)|画像の表示画像の複写

■ 音の再生 mp3/oggの再生テキストの読上げ

■ Web Storage LocalStorageの追加/変更/削除

■ Web Audio API音源生成ボリューム操作バランス操作音圧の描画スペクトル描画多チャンネル信号の分離(splitter)/合成(merger)オーディオファイルの再生オーディオファイルの再生(アップロードファイル)オーディオ再生速度の変更


入力フォーム

入力フォーム   戻る


<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-language" content="ja">
<meta charset="UTF-8">
<title>入力フォーム(HTML5)</title>
<script>
//<!--
function init() {
  var inputs = document.querySelectorAll("input");
  for (var i = 0; i < inputs.length; i++) {
    inputs[i].addEventListener("change", function() {
    form.out2.value = this.value ;
    }, false);
  }
}
//-->
</script>
</head>
<body onload="init();">
<form name="form"><!--日付の入力欄-->date:<input type="date" name="date"><br>
<!--UTC(協定世界時)による日時の入力欄-->datetime:<input type="datetime" name="datetime"><br>
<!--UTC(協定世界時)によらないローカル日時の入力欄-->datetime-local:<input type="datetime-local" name="datetime-local" step="60"><br>
<!--月の入力欄-->month:<input type="month" name="month"><br>
<!--週の入力欄-->week:<input type="week" name="week"><br>
<!--時間の入力欄-->time:<input type="time" name="time"><br>
<!--数値の入力欄-->number:<input type="number" name="nunber"><br>
<!--レンジの入力欄-->range:<input type="range" name="range"><br>
<!--検索テキストの入力欄-->serchi:<input type="serch" name="serchi"><br>
<!--電話番号の入力欄-->tel:<input type="tel" name="tel"><br>
<!--URLの入力欄-->url:<input type="url" name="url"><br>
<!--メールアドレスの入力欄-->mail:<input type="email" name="email"><br>
<!--色の入力欄-->colore:<input type="color" name="color"><br>
<br>
入力データの表示:<input name="out2" ><br>
<br>
</form>
</body>
</html>

描画

図の描画   戻る


<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-language" content="ja">
<meta charset="UTF-8">
<title>canvas図形の描画</title>
<style>
<!--  
body {}
-->
</style>
<script>
onload = function() { ini(); };
function ini() {
//1長方形を塗りつぶす
  var ctx1 = document.getElementById('c1').getContext('2d');	
  ctx1.fillStyle = 'blue';
  ctx1.fillRect(10,10,90,90);
//2長方形を描く
  var ctx2 = document.getElementById('c2').getContext('2d');
  ctx2.strokeRect(10,10,90,90);
//3円を描く
  var ctx3 = document.getElementById('c3').getContext('2d');	
  ctx3.arc(50,50,40, 0, Math.PI*2, false);
  ctx3.stroke();
//4円弧を描く
  var ctx4 = document.getElementById('c4').getContext('2d');	
  ctx4.arc(50,50,40, 10 * Math.PI / 180, 80 * Math.PI / 180, true);
  ctx4.stroke();
//5円弧を塗りつぶす
  var ctx5 = document.getElementById('c5').getContext('2d');	
  ctx5.arc(50,50,40, 10 * Math.PI / 180, 80 * Math.PI / 180, true);
  ctx5.fill();
//6パスを新たに作る
//6-1パスを初期化
  var ctx6 = document.getElementById('c6').getContext('2d');	
  ctx6.beginPath();
//6-2一つめのサブパス
  ctx6.moveTo(50, 10);
  ctx6.lineTo(10, 90);
  ctx6.lineTo(90,90);
  ctx6.closePath();
//6-3二つ目のサブパス
  ctx6.moveTo(70, 10);
  ctx6.lineTo(95, 50);
  ctx6.lineTo(55, 50);
  ctx6.closePath();
//6-4これまで描いたパスを表示
  ctx6.stroke();
//7テキストの表示

  var ctx7 = document.getElementById('c7').getContext('2d');
  ctx7.strokeRect(0, 0, 100, 100);
  ctx7.font = "11pt Arial";
  ctx7.fillStyle = "red";
  ctx7.fillText  ("Sample String",5, 50);
  ctx7.strokeStyle = "blue";
  ctx7.strokeText("Sample String",5, 80);

//8銭を引く
  var ctx8 = document.getElementById('c8').getContext('2d');
  ctx8.beginPath();
//8-1lineWidthの指定なしの例
  ctx8.moveTo(10, 25);
  ctx8.lineTo(90, 25);
  ctx8.stroke();
//8-2 lineWidthを5にした例
  ctx8.beginPath();
  ctx8.lineWidth = 5;
  ctx8.moveTo(10, 50);
  ctx8.lineTo(90, 50);
  ctx8.stroke();
//8-3 lineWidthを10にした例
  ctx8.beginPath();
  ctx8.lineWidth = 10;
  ctx8.moveTo(10, 75);
  ctx8.lineTo(90, 75);
  ctx8.stroke();
}
</script>
</head>
<body>
<canvas id=c1 width=100 height=100></canvas>
<canvas id=c2 width=100 height=100></canvas>
<canvas id=c3 width=100 height=100></canvas>
<canvas id=c4 width=100 height=100></canvas>
<canvas id=c5 width=100 height=100></canvas>
<canvas id=c6 width=100 height=100></canvas>
<canvas id=c7 width=100 height=100></canvas>
<canvas id=c8 width=100 height=100></canvas>
</body>
</html>

図形のグラデーション   戻る


<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-language" content="ja">
<meta charset="UTF-8">
<title>Canvasグラデーション</title>
</head>
<body>
<canvas id="canvas3" width=200 height=200></canvas>
<script>
var canvas3 = document.getElementById("canvas3");
var context3 = canvas3.getContext("2d");
//線形のグラデーション
var gra = context3.createLinearGradient(0, 0, 200,0); //開始点地点x,y,終了地点x,yを指定する。
//グラデーション終点のオフセット(0~1)と色の指定
gra.addColorStop(0.0, "rgb(255,0, 0)");  //0.0-赤
gra.addColorStop(0.5, "rgb(0, 255, 0)"); //0.5-緑
gra.addColorStop(1.0, "rgb(0, 0, 255)"); //1.0-青
context3.fillStyle = gra;
context3.fillRect(0, 0, 200, 200);       //四角の描画
</script>
<canvas id="canvas4" width=200 height=200></canvas>
<script>
var canvas4 = document.getElementById("canvas4");
var context4 = canvas4.getContext("2d");
//円形のグラデーション
var gra2 = context4.createRadialGradient(80, 80, 0, 80,80, 150); //中心1座標x,y,半径r,中心2座標x,y,半径rを指定する
//グラデーション終点のオフセット(0~1)と色の指定
gra2.addColorStop(0.0, "rgb(255,0, 0)");  //0.0-赤
gra2.addColorStop(0.5, "rgb(0, 255, 0)"); //0.5-緑
gra2.addColorStop(1.0, "rgb(0, 0, 255)"); //1.0-青
context4.fillStyle = gra2;
context4.arc(100, 100, 100, 0, 2*Math.PI, true); //円形の描画
context4.fill();
</script>
<canvas id="canvas5" width=200 height=200></canvas>
<script>
var canvas5 = document.getElementById("canvas5");
var context5 = canvas5.getContext("2d");
//円形のグラデーション
var gra3 = context5.createRadialGradient(80, 80, 0, 50,50, 200);
gra3.addColorStop(0.0, "rgb(255,255,255)"); //0.0-白
gra3.addColorStop(1.0, "rgb(0, 0, 0)");     //1.0-黒
context5.fillStyle = gra3;
context5.arc(100, 100, 100, 0, 2*Math.PI, true); //円形の描画
context5.fill();
</script>
</body>
</html>

画像の描画   戻る


<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-language" content="ja">
<meta charset="UTF-8">
<title>canvasイメージの描画</title>
</head>
<body>
<canvas id="canvas3" width=500 height=500></canvas>
<script type="text/javascript">
var canvas = document.getElementById("canvas3");
var context = canvas.getContext("2d");
var image = new Image();
image.src = "tori_200.jpg";
image.onload = function() {
  var w = image.width;
  var h = image.height;
  context.drawImage(image, 0, 0, w, h);
  context.drawImage(image, w, h, w/2, h/2);
};
</script>
</body>
</html>

画像のクリッピング   戻る


<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-language" content="ja">
<meta charset="UTF-8">
<title>Canvasイメージのクリップ</title>
</head>
<body>
<canvas id="canvas1" width=200 height=200></canvas>
<canvas id="canvas2" width=200 height=200></canvas>
<script>
var canvas1  = document.getElementById("canvas1");
var context1 = canvas1.getContext("2d");
var canvas2  = document.getElementById("canvas2");
var context2 = canvas2.getContext("2d");
context2.beginPath();
context2.arc(100, 100, 100, 0, 2*Math.PI, true);//円形でクリップ
context2.clip();
var image = new Image();
image.src = "tori_200.jpg";
image.onload = function() {
  context1.drawImage(image, 0, 0, canvas1.width, canvas1.height);//原画の描画
  context2.drawImage(image, 0, 0, canvas2.width, canvas2.height);//クリップ描画
}
</script>
</body>
</html>

画像の加工(ピクセル操作)   戻る


<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-language" content="ja">
<meta charset="UTF-8">
<title>Canvasピクセル処理</title>
</head>
<body>
<canvas id="canvas"  width=200 height=200></canvas>
<canvas id="canvas1" width=200 height=200></canvas>
<canvas id="canvas2" width=200 height=200></canvas>
<script>
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
var canvas1 = document.getElementById("canvas1");
var context1 = canvas1.getContext("2d");
var canvas2 = document.getElementById("canvas2");
var context2 = canvas2.getContext("2d");

var image = new Image();
image.src = "tori_200.jpg";
image.onload = function() {
  context.drawImage(image, 0, 0, canvas.width, canvas.height);//原画を描画
  var pixel = context.getImageData( 0, 0, canvas.width, canvas.height) ;
//白黒(RGBの要素の平均値をRGBの値にする。)
  for(var y = 0; y < canvas.height; y++) {
    for(var x = 0; x < canvas.width ; x++) {
      r = pixel.data[(y * canvas.width + x) * 4 + 0] ;
      g = pixel.data[(y * canvas.width + x) * 4 + 1] ;
      b = pixel.data[(y * canvas.width + x) * 4 + 2] ;
      a = (r + g + b)/3 ;
      pixel.data[(y * canvas.width + x) * 4 + 0] = a ;
      pixel.data[(y * canvas.width + x) * 4 + 1] = a ;
      pixel.data[(y * canvas.width + x) * 4 + 2] = a ;
      pixel.data[(y * canvas.width + x) * 4 + 3] = 255 ;
    }
  }
  context1.putImageData(pixel,0,0) ;//白黒で描画
//セピア色(RGBそれぞれの要素をRx0.9,Gx0.7,Bx0.4で設定する。)
  for(var y = 0; y < canvas.height; y++) {
    for(var x = 0; x < canvas.width ; x++) {
      r = pixel.data[(y * canvas.width + x) * 4 + 0] ;
      g = pixel.data[(y * canvas.width + x) * 4 + 1] ;
      b = pixel.data[(y * canvas.width + x) * 4 + 2] ;

      pixel.data[(y * canvas.width + x) * 4 + 0] = r * 0.9 ;
      pixel.data[(y * canvas.width + x) * 4 + 1] = g * 0.7 ;
      pixel.data[(y * canvas.width + x) * 4 + 2] = b * 0.4 ;
      pixel.data[(y * canvas.width + x) * 4 + 3] = 255 ;
    }
  }
  context2.putImageData(pixel,0,0) ;//セピア色で描画
}
</script></body>
</html>

画像の保存   戻る


<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-language" content="ja">
<meta charset="UTF-8">
<title>Canvasファイルへ保存</title>
</head>
<body>
<canvas id="canvas" width=200 height=200></canvas>
<br><br>
<button onclick="saveData()">保存</button>
<script>
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
context.fillStyle = "rgb(0, 0, 0)";
context.fillRect(0, 0,200,200);
context.fillStyle = 'blue';
context.arc(100,100,90, 0, Math.PI*2, false);
context.fill();
function saveData() {
  var data = canvas.toDataURL("image/png");
  data = data.replace("image/png", "image/octet-stream");
  window.open(data, "save");
}
</script>
</body>
</html>

画像の保存(その2)   戻る

ブラウザの画像保存機能で保存できます。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-language" content="ja">
<meta charset="UTF-8">
<title>Canvasファイルへ保存(その2)</title>
</head>
<body>
<canvas id="canvas" width=200 height=200></canvas>
<br><br>
<p><button onclick="dsp()">image表示</button><p>
<p>表示画像をマウス右クリックして保存する。</p>
<img id="output" src="">
<script>
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
context.fillStyle = "rgb(0, 0, 0)";
context.fillRect(0, 0,200,200);
context.fillStyle = 'blue';
context.arc(100,100,90, 0, Math.PI*2, false);
context.fill();
function dsp() {
  // 描画内容をデータURIに変換する (引数なしはPNG)
  var dataURI = canvas.toDataURL() ;
  // JPGの場合 (第2引数は品質)
  //var dataURI = canvas.toDataURL( "image/jpeg", 0.75 ) ;
  // img要素を取得
  var image = document.getElementById( "output" ) ;
  image.src = dataURI ;
}
</script>
</body>
</html>

画像の表示   戻る


<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-language" content="ja">
<meta charset="UTF-8">
<title>Canvasの画像表示</title>
</head>
<body>
<canvas id="canvas" width=200 height=200></canvas>
<br><br>
<button onclick="display()">表示</button>
<script>
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
context.fillStyle = "rgb(0, 0, 0)";
context.fillRect(0, 0,200,200);
context.fillStyle = 'blue';
context.arc(100,100,90, 0, Math.PI*2, false);
context.fill();
function display() {
  var img = new Image() ;
  img.src = canvas.toDataURL("image/png");
  img.onload = function() { location.href = img.src ; }
}
</script>
</body>
</html>

画像の複写   戻る


<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-language" content="ja">
<meta charset="UTF-8">
<title>Canvasの画像複写</title>
</head>
<body>
<canvas id="canvas" width=200 height=200></canvas>
<div id="cp"></div>
<br><br>
<button onclick="copy()">複写</button>
<script>
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
context.fillStyle = "rgb(0, 0, 0)";
context.fillRect(0, 0,200,200);
context.fillStyle = 'blue';
context.arc(100,100,90, 0, Math.PI*2, false);
context.fill();
function copy() {
  var img = new Image() ;
  img.src = canvas.toDataURL("image/png");
  img.onload = function() {
    var imgelm = document.createElement("img") ;
    imgelm.src = img.src ;
    document.getElementById("cp").appendChild(imgelm) ;
//  document.getElementById("cp").innerHTML ="<img src = 'img.src'>" ;
  }
}
</script>
</body>
</html>

音の再生

mp3/oggファイルの再生   戻る


<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-language" content="ja">
<meta charset="UTF-8">
<title>音楽の再生</title>
</head>
<body onload ="init()">
<audio controls>
<source src="../sound/Yesterday.mp3">
<source src="../sound/Yesterday.ogg"> </audio><br>
<br>
<br>
<button onclick="ply();">先頭から再生</button>
<button onclick="pus();">一時停止</button>
<button onclick="rst();">再生</button>
<button onclick="stp();">停止</button>
<SCRIPT>
//<!-- 
function init() {
  ad = new Audio("");
  if(ad.canPlayType){
    var canPlayOgg = ("" != ad.canPlayType("audio/ogg"));
    var canPlayMp3 = ("" != ad.canPlayType("audio/mpeg"));
    if(canPlayOgg && canPlayMp3){
      window.alert("ogg/mp3をサポートしています。") ;
      ad.src = "../sound/Yesterday.ogg" ; 
    }else if(canPlayOgg){
      window.alert("oggをサポートしています。") ;
      ad.src = "../sound/Yesterday.ogg" ;
    }else if(canPlayMp3){
      window.alert("mp3をサポートしています。") ;
      ad.src = "../sound/Yesterday.mp3" ;
    }else{
      window.alert("oggもmp3もサポートしていません") ;
    }
  }else{
    window.alert("canPlayTypeメソッドが存在しません") ;
  }
}
function rst(){ ad.play(); }  // 再生(一時停止中は一時停止箇所から再生) 
function ply(){               //  先頭から再生 
  ad.load();  // ロードを実行して初期状態に戻す
  ad.play();
}  
function pus(){ad.pause();}   // 一時停止 
function stp(){               // 停止 
  if(!ad.ended){        // ended属性で終了判定する
    ad.pause();
    ad.currentTime = 0;  // 再生位置を0秒にする
  }
}
//-->
</script></body>
</html>

テキストの読上げ   戻る


<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-language" content="ja">
<meta charset="UTF-8">
<TITLE>テキスト読上げ</TITLE>
</head>
<body> 
<input type="button" onclick="speak('おはようございます','ja-JP')" value="日本語">
<input type="button" onclick="speak('Good Morning','en-US')" value="English">
<SCRIPT>
function speak(text,lang) {
  var synthes = new SpeechSynthesisUtterance();
  synthes.volume = 1;  //音量
  synthes.rate = 1;    //スピード
  synthes.pitch = 0;   //ピッチ
  synthes.text = text;
  synthes.lang = lang ;  //言語
  speechSynthesis.speak(synthes);
}
</script>
</body>
</html>

Web Storage

LocalStorageの追加/変更/削除   戻る


<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-language" content="ja">
<meta charset="UTF-8">
<title>localStorage Sample</title>
</head>
<body>
<div class="page">
        <header>
            <div id="title">
                <h1>Local Storage</h1>
            </div>
        </header>
        <section id="main">
			保存するKey:<input id="textkey" type="text" />
			保存する値:<input id="textdata" type="text" />
			<button id="button" onclick="set()">保存</button>
			<button id="button" onclick="del()">削除</button><br>
			<button id="button" onclick="delall()">全て削除</button>
<table border="1">
<thead>
    <tr>
      <th>キー</th>
      <th>値</th>
    </tr>
</thead>
  <tbody id="list">
    <tr>
      <td></td>
      <td></td>
    </tr>
  </tbody>
</table>
        </section>
        <footer>
        </footer>
    </div>
<script type="text/javascript">
//  Web Storageの実装確認
if (typeof localStorage === 'undefined') {
  window.alert("このブラウザはWeb Storage機能が実装されていません");
}
  else {
    window.alert("このブラウザはWeb Storage機能を実装しています");
    var storage = localStorage;
    //  localnStorageへの格納
    function set() {
      var key = document.getElementById("textkey").value;
      var value = document.getElementById("textdata").value;
      // 値の入力チェック
      if (key && value) {storage.setItem(key, value);	}
        // 変数の初期化
        key = "";  value = "";  view();
    }
    //  localStorageからのデータの取得と表示
    function view() {
      var list = document.getElementById("list")
      while (list.firstChild) list.removeChild(list.firstChild);
      // localtorageすべての情報の取得
      for (var i=0; i < storage.length; i++) {
        var _key = storage.key(i);
        // localStorageのキーと値を表示
        var tr = document.createElement("tr");
        var td1 = document.createElement("td");
        var td2 = document.createElement("td");
        list.appendChild(tr);
        tr.appendChild(td1);
        tr.appendChild(td2);
        td1.innerHTML = _key;
        td2.innerHTML = storage.getItem(_key);
      }
    }
    //  localStorageから削除
    function del() {
      var key = document.getElementById("textkey").value;
      storage.removeItem(key);
      // 変数の初期化
      key = "";  view();
     }
    //  localStorageからすべて削除
    function delall() {
      storage.clear();
      view();
    }
  }
view();
</script>
</body>
</html>



Web Audio API

音源の生成   戻る


<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Oscillator</title>
</head>
<body>
<form name="form">
Type<select name="type">
<option value="sine">Sine</option>
<option value="square">Square</option>
<option value="sawtooth">SawTooth</option>
<option value="triangle">Triangle</option></select><br>
Freq(Hz)<input type="range" min="50" max="15000" name="freq" value="440"><br>
</form>
<button onclick="srt()">start</button>
<button onclick="stp()">stop</button>
<script type="text/javascript">
  window.AudioContext = window.AudioContext || window.webkitAudioContext; // AudioContextクラスインスタンス生成(Web互換指定)
  context = new AudioContext();
function srt() {
  oscillator = context.createOscillator();// oscillatorノードのインスタンスの作成
  oscillator.start = oscillator.start || oscillator.noteOn;
  oscillator.stop  = oscillator.stop  || oscillator.noteOff;
  oscillator.connect(context.destination);// サウンド出力ノードに接続する
  oscillator.type = form.type.value;      // 生成タイプの設定
  oscillator.frequency.value = parseFloat(form.freq.value); // 発生周波数の設定
  oscillator.start(0);                    // 開始
}
function stp() { oscillator.stop(0) ; }  // 停止
</script>
</body>
</html>

ボリューム操作   戻る


<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Gain</title>
</head>
<body>
<form name="form">
Level<input type="range" min="0" max="1" step="0.01" name="level" value="0.5" onchange="cng()"> 
</form><br>
<button onclick="srt()">start</button>
<button onclick="stp()">stop</button>
<script type="text/javascript">
  window.AudioContext = window.AudioContext || window.webkitAudioContext; // AudioContextクラスインスタンス生成(Web互換指定)
  context = new AudioContext();
function srt() {
  oscillator = context.createOscillator();// oscillatorノードのインスタンスの作成
  oscillator.start = oscillator.start || oscillator.noteOn;
  oscillator.stop  = oscillator.stop  || oscillator.noteOff;
  context.createGain = context.createGain || context.createGainNode;
  gain = context.createGain();            // gainノードのインスタンスの作成
  oscillator.connect(gain);               // gainノードに接続する
  gain.connect(context.destination);      // サウンド出力ノードに接続する

  oscillator.type = "sine" ;              // 生成タイプの設定(正弦波)
  oscillator.frequency.value = 440 ;      // 生成周波数の設定
  gain.gain.value = parseFloat(form.level.value); // レベルの設定
  oscillator.start(0);                    // 開始
}
function stp() { oscillator.stop(0) ; }  // 停止
function cng() { gain.gain.value = parseFloat(form.level.value) ; } // レベルの再設定
</script>
</body>
</html>

バランス操作   戻る

利用プラウザにより動作しない場合があります。(Widows/Andorid Chrome は動作します。)

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Panner</title>
</head>
<body>
<form name="form">
Pan(Balance)<input type="range" min="-1" max="1" step="0.01" name="pan" value="0" onchange="cng()"> 
</form><br>
<button onclick="srt()">start</button>
<button onclick="stp()">stop</button>
<script type="text/javascript">
  window.AudioContext = window.AudioContext || window.webkitAudioContext; // AudioContextクラスインスタンス生成(Web互換指定)
  context = new AudioContext();
function srt() {
  oscillator = context.createOscillator();// oscillatorノードのインスタンスの作成
  oscillator.start = oscillator.start || oscillator.noteOn;
  oscillator.stop  = oscillator.stop  || oscillator.noteOff;
  panner = context.createStereoPanner();  // pannerノードのインスタンスの作成
  oscillator.connect(panner);             // pannerノードに接続する
  panner.connect(context.destination);    // サウンド出力ノードに接続する

  oscillator.type = "sine" ;              // 生成タイプの設定(正弦波)
  oscillator.frequency.value = 440 ;      // 生成周波数の設定(正弦波)
  panner.pan.value = parseFloat(form.pan.value);
  oscillator.start(0);                    // 開始
}
function stp() { oscillator.stop(0) ; }  // 停止
function cng() { panner.pan.value = parseFloat(form.pan.value) ; } // レベルの再設定
</script>
</body>
</html>

音圧の描画   戻る


<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Analyser(TimeDomainData)</title>
</head>
<body>
<canvas id = "c1" width="400" height="200"></canvas>
<form name="form">
Type<select name="type">
<option value="sine">Sine</option>
<option value="square">Square</option>
<option value="sawtooth">SawTooth</option>
<option value="triangle">Triangle</option></select><br>
Freq(Hz)<input type="range" min="50" max="15000" name="freq" value="440"><br>
</form>
<button onclick="srt()">start</button>
<button onclick="stp()">stop</button>
<script type="text/javascript">
  canvas1        = document.getElementById("c1"); // キャンバスの設定
  canvasContext1 = canvas1.getContext('2d');

  window.AudioContext = window.AudioContext || window.webkitAudioContext; // AudioContextクラスインスタンス生成(Web互換指定)
  context = new AudioContext();

function srt() {
  oscillator = context.createOscillator();// oscillatorノードのインスタンスの作成
  oscillator.start = oscillator.start || oscillator.noteOn;
  oscillator.stop  = oscillator.stop  || oscillator.noteOff;
  analyser = context.createAnalyser();    // Analyserノードのインスタンスの作成
  analyser.fftSize = 2048;                // 標準値
  oscillator.connect(analyser);           // analyserノードに接続する
  analyser.connect(context.destination);  // サウンド出力ノードに接続する
  oscillator.type = form.type.value;      // 生成タイプの設定
  oscillator.frequency.value = parseFloat(form.freq.value); // 発生周波数の設定
  oscillator.start(0);                    // 開始
  drawwave1() ;
}
function stp() { oscillator.stop(0) ; }
function drawwave1() {
    intervalid1 = window.setInterval(function() {
        var times = new Uint8Array(analyser.fftSize);  // Array sizeは1024 (FFTサイズの半分の値)
        analyser.getByteTimeDomainData(times);
        canvasContext1.clearRect(0, 0, canvas1.width, canvas1.height); // キャンバスのクリア
        canvasContext1.beginPath();        // 描画の開始
        for (var i = 0, len = times.length; i < len; i++) {
            var x = (i / len) * canvas1.width;
            var y = (1 - (times[i] / 255)) * canvas1.height;
            if (i === 0) { canvasContext1.moveTo(x, y); } else { canvasContext1.lineTo(x, y); }
        }
        canvasContext1.stroke();           // 描画
    }, 50);                                // 1秒間に50回

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

スペクトルの描画   戻る


<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Analyser(FrequencyData)</title>
</head>
<body>
<canvas id = "c2" width="400" height="200"></canvas>
<form name="form">
Type<select name="type">
<option value="sine">Sine</option>
<option value="square">Square</option>
<option value="sawtooth">SawTooth</option>
<option value="triangle">Triangle</option></select><br>
Freq(Hz)<input type="range" min="50" max="15000" name="freq" value="440"><br>
</form>
<button onclick="srt()">start</button>
<button onclick="stp()">stop</button>
<script type="text/javascript">
  canvas2        = document.getElementById("c2"); // キャンバスの設定
  canvasContext2 = canvas2.getContext('2d');

  window.AudioContext = window.AudioContext || window.webkitAudioContext; // AudioContextクラスインスタンス生成(Web互換指定)
  context = new AudioContext();

function srt() {
  oscillator = context.createOscillator();// oscillatorノードのインスタンスの作成
  oscillator.start = oscillator.start || oscillator.noteOn;
  oscillator.stop  = oscillator.stop  || oscillator.noteOff;
  analyser = context.createAnalyser();    // Analyserノードのインスタンスの作成
  analyser.fftSize = 2048;                // 標準値
  oscillator.connect(analyser);           // analyserノードに接続する
  analyser.connect(context.destination);  // サウンド出力ノードに接続する
  oscillator.type = form.type.value;      // 生成タイプの設定
  oscillator.frequency.value = parseFloat(form.freq.value); // 発生周波数の設定
  oscillator.start(0);  // 開始
  drawwave2() ;
}
function stp() { oscillator.stop(0) ; }  // 停止
function drawwave2() {
    intervalid2 = window.setInterval(function() {
        var spectrums = new Uint8Array(analyser.frequencyBinCount);  // Array sizeは1024 (FFTサイズの半分の値)
        analyser.getByteFrequencyData(spectrums);
        canvasContext2.clearRect(0, 0, canvas2.width, canvas2.height); //キャンバスのクリア
        canvasContext2.beginPath();       // 描画開始
        for (var i = 0, len = spectrums.length; i < len; i++) {
            var x = (i / len) * canvas2.width;
            var y = (1 - (spectrums[i] / 255)) * canvas2.height;
            if (i === 0) { canvasContext2.moveTo(x, y); } else { canvasContext2.lineTo(x, y); }
        }
        canvasContext2.stroke();          // 描画
    }, 10);                               // 1秒間に10回
}
</script>
</body>
</html>

多チャンネル信号の分離(splitter)/合成(merger)   戻る


<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>splitter</title>
<meta name="viewport" content="width=device-width">
</head>
<body>
<form name="form">
左の音量:<input type="range" min="0" max="1" step="0.01" size="10" id="levelL" value="0.5" onchange="cng()"/>
右の音量:<input type="range" min="0" max="1" step="0.01" size="10" id="levelR" value="0.5" onchange="cng()"/><br>
</form>
<button onclick="srt()">start</button> 
<button onclick="stp()">stop</button>
<script type="text/javascript">
window.AudioContext = window.AudioContext || window.webkitAudioContext;
context = new AudioContext();
function srt() {
    oscillator = context.createOscillator();
    context.createGain = context.createGain || context.createGainNode;
    splitter = context.createChannelSplitter(2);  // The number of splitted channels
    merger = context.createChannelMerger(2);  // The number of merged channels
    gainL = context.createGain();  // for Left  Channel
    gainR = context.createGain();  // for Right Channel

    oscillator.connect(splitter);         // OscillatorNode (Monaural input) -> Stereo
    splitter.connect(gainL, 0, 0);        // ChannelSplitterNode -> GainNode (Left  Channel)
    splitter.connect(gainR, 0, 0);        // ChannelSplitterNode -> GainNode (Right Channel)
    gainL.connect(merger, 0, 0);          // GainNode (Left  Channel) -> ChannelMergerNode (Left  Channel)
    gainR.connect(merger, 0, 1);          // GainNode (Right Channel) => ChannelMergerNode (Right Channel)
    merger.connect(context.destination);  // ChannelMergerNode -> AudioDestinationNode (Output)

    oscillator.start = oscillator.start || oscillator.noteOn;
    oscillator.stop  = oscillator.stop  || oscillator.noteOff;
    oscillator.type = "sine" ;
    oscillator.frequency.value = 440 ;
    oscillator.start(0);
}
function stp() { oscillator.stop(0); }
function cng() {
  gainL.gain.value = parseFloat(document.getElementById("levelL").value);
  gainR.gain.value = parseFloat(document.getElementById("levelR").value);
}
</script>
</body>
</html>

オーディオファイルの再生   戻る


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Audio play(file)</title>
</head>
<body>
<button onclick="srt()">Play</button> <button onclick="stp()">stop</button>
<script type="text/javascript">
window.AudioContext = window.AudioContext || window.webkitAudioContext; // AudioContextクラスインスタンス生成(Web互換指定)
context = new AudioContext();
loaded = false;
onload = function() {
  xmlHttpRequest = new XMLHttpRequest();
  xmlHttpRequest.responseType = 'arraybuffer';
  xmlHttpRequest.onload = function() {
    audioData = this.response;
    context.decodeAudioData(    // バイナリデータのデコード
      audioData,
      function( decodedData ) {
        audiodata = decodedData;
        loaded = true ;
        srt() ;
      },
      function( e )  {alert( e.err ); } 
    );
  }
  xmlHttpRequest.open( 'GET',"Yesterday.mp3", true );
  xmlHttpRequest.send();
}
function srt() {  
  if ( loaded ) {
    source = context.createBufferSource(); // オーディオノードの作成
    source.connect(context.destination); // サウンド出力ノードに接続する
    source.buffer = audiodata ;
    source.start();  // 音源の再生
  } else { alert ("オーディオデータが読み込まれておりません") }
}
function stp() { source.stop() ; }   // 音源の再生停止
</script>
</body>
</html>

オーディオファイルの再生(アップロードファイル)   戻る


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Audio play(file upload)</title>
</head>
<body><input id="sample" type="file" size ="30" accept="audio/*" /> 
<button onclick="srt()">Play</button> <button onclick="stp()">stop</button>
<script type="text/javascript">
window.AudioContext = window.AudioContext || window.webkitAudioContext; // AudioContextクラスインスタンス生成(Web互換指定)
context = new AudioContext();
loaded = false;
file = document.getElementById( 'sample' );
file.onchange = function() {
  var reader = new FileReader();
  reader.onload = function() {
    var audioData = this.result;
    context.decodeAudioData(
      audioData,
      function( decodedData ) {
        source = context.createBufferSource();
        audiodata = decodedData;
        loaded = true ;
        srt() ;
      },
      function( e ) { alert( e.err ) ; } 
    );
  };
  reader.readAsArrayBuffer( this.files[ 0 ] );
}
function srt() {  
  if ( loaded ) {
    source = context.createBufferSource();
    source.connect(context.destination); // サウンド出力ノードに接続する
    source.buffer = audiodata ;
    source.start();
  } else { alert ("オーディオデータが読み込まれておりません") }
}
function stp() { source.stop() ; } 
</script>
</body>
</html>

オーディオ再生速度の変更   戻る


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Audio play(rate)</title>
</head>
<body>
<form name="form">
<input type="range" min="0.2" max="5" step="0.01" id="rate" value="1" onchange="cng()"/>
</form>
<button onclick="srt()">Play</button> <button onclick="stp()">stop</button>
<script type="text/javascript">
window.AudioContext = window.AudioContext || window.webkitAudioContext;
context = new AudioContext();
loaded = false;
onload = function() {
  xmlHttpRequest = new XMLHttpRequest();
  xmlHttpRequest.responseType = 'arraybuffer';
  xmlHttpRequest.onload = function() {
    audioData = this.response;
    context.decodeAudioData(
      audioData,
      function( decodedData ) {
        audiodata = decodedData;
        loaded = true ;
        srt() ;
      },
      function( e )  {alert( e.err ); } 
    );
  }
  xmlHttpRequest.open( 'GET',"audioapi_piano.wav", true ); //440Hz ピアノデータ
  xmlHttpRequest.send();
}
function srt() {  
  if ( loaded ) {
    source = context.createBufferSource();
    source.connect(context.destination);
    source.buffer = audiodata ;
    source.playbackRate.value = parseFloat(form.rate.value) ; // 再生速度の設定
    source.start();
  } else { alert ("オーディオデータが読み込まれておりません") }
}
function stp() { source.stop() ; } 
function cng() { source.playbackRate.value = parseFloat(form.rate.value) ; } // 再生速度の設定
</script>
</body>
</html>


JavaScriptJavaScript/HTMLJavaScript/HTML5サイトマップホーム