JavaScript/HTML５おぼえがき

｜JavaScript｜JavaScript/HTML｜ サイトマップ｜ホーム｜

Ｗｅｂ　Ａｕｄｉｏ　ＡＰＩ

音源の生成　　　戻る

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Oscillator</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
</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 lang="ja">
<head>
<meta charset="UTF-8">
<title>Gain</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
</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 lang="ja">
<head>
<meta charset="UTF-8">
<title>Panner</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
</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 lang="ja">
<head>
<meta charset="UTF-8">
<title>Analyser(TimeDomainData)</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
</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);                                // １秒間に５０回

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

スペクトルの描画　　　戻る

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Analyser(FrequencyData)</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
</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);                               // １秒間に１０回
}
</script>
</body>
</html>

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

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>splitter</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
</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 lang="ja">
<head>
<meta charset="UTF-8">
<title>Audio play(file)</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
</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 lang="ja">
<head>
<meta charset="UTF-8">
<title>Audio play(file upload)</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
</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 lang="ja">
<head>
<meta charset="UTF-8">
<title>Audio play(rate)</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
</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>

｜JavaScript｜JavaScript/HTML｜ サイトマップ｜ホーム｜