javascript / html5로 즉석에서 사운드 생성
javascript / html5로 일정한 사운드 스트림을 생성 할 수 있습니까? 예를 들어, 영구 사인파를 생성하려면 출력 버퍼가 비워 질 때마다 호출되는 콜백 함수가 있습니다.
function getSampleAt(timestep)
{
return Math.sin(timestep);
}
(아이디어는 이것을 사용하여 인터랙티브 신스를 만드는 것입니다. 키가 얼마나 오래 눌 릴지 미리 모르기 때문에 고정 길이 버퍼를 사용할 수 없습니다)
HTML5 오디오 요소 사용
audio스티븐 위튼 스 (Steven Wittens) 가 자바 스크립트 신디사이저 생성에 관한 블로그 게시물에서 언급 했듯이 JavaScript와 요소를 사용하는 브라우저 간 생성 지속 오디오 는 현재 불가능합니다 .
"... 원활한 재생을 위해 합성 된 오디오 청크를 대기열에 넣을 수있는 방법이 없습니다."
웹 오디오 API 사용
웹 오디오 API는 자바 스크립트 오디오 합성을 촉진하도록 설계되었습니다. Mozilla 개발자 네트워크에는 Firefox 4 이상에서 작동 하는 웹 기반 톤 생성기 가 있습니다 [ 데모 1 ]. 이 코드에 다음 두 줄을 추가하면 키를 누를 때 생성되는 지속 오디오가있는 신디사이저가 생성됩니다 [ 데모 2 -Firefox 4에서만 작동, 먼저 '결과'영역을 클릭 한 다음 아무 키나 누르십시오].
window.onkeydown = start;
window.onkeyup = stop;
Web Audio API 의 BBC 페이지 도 검토 할 가치가 있습니다. 안타깝게도 Web Audio API에 대한 지원은 아직 다른 브라우저로 확장되지 않습니다.
가능한 해결 방법
현재 브라우저 간 신디사이저를 만들려면 다음과 같은 방법으로 미리 녹음 된 오디오를 사용해야합니다.
- 미리 녹음 된 긴 ogg / mp3 샘플 톤을 사용하여 별도의
audio요소에 포함하고 키를 누를 때 시작 및 중지합니다. - 오디오 요소가 포함 된 swf 파일을 포함하고 JavaScript를 통해 재생을 제어합니다. (이것은 Google Les Paul Doodle이 사용 하는 방법 인 것으로 보입니다 .)
이제 대부분의 브라우저에서 웹 오디오 API 를 사용할 수 있습니다 ( IE 및 Opera Mini 제외 ).
이 코드를 사용해보십시오.
// one context per document
var context = new (window.AudioContext || window.webkitAudioContext)();
var osc = context.createOscillator(); // instantiate an oscillator
osc.type = 'sine'; // this is the default - also square, sawtooth, triangle
osc.frequency.value = 440; // Hz
osc.connect(context.destination); // connect it to the destination
osc.start(); // start the oscillator
osc.stop(context.currentTime + 2); // stop 2 seconds after the current time볼륨을 낮추려면 다음과 같이 할 수 있습니다.
var context = new webkitAudioContext();
var osc = context.createOscillator();
var vol = context.createGain();
vol.gain.value = 0.1; // from 0 to 1, 1 full volume, 0 is muted
osc.connect(vol); // connect osc to vol
vol.connect(context.destination); // connect vol to context destination
osc.start(context.currentTime + 3); // start it three seconds from now
나는 @brainjam의 링크에서 찾은 Web Audio API Working Draft 를 읽는 동안 크롬 실험에서 대부분을 얻었습니다 .
도움이 되었기를 바랍니다. 마지막으로 크롬 인스펙터 (ctrl-shift-i)에서 다양한 개체를 검사하는 것이 매우 유용합니다.
Web Audio API가 Chrome에 제공됩니다. 참조 http://googlechrome.github.io/web-audio-samples/samples/audio/index.html를
"시작하기"의 지침을 따르고 매우 인상적인 데모를 확인하십시오.
업데이트 (2017) : 지금까지 이것은 훨씬 더 성숙한 인터페이스입니다. API는 https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API에 문서화되어 있습니다.
확실한! 이 데모에서 톤 신디사이저를 사용할 수 있습니다.
audioCtx = new(window.AudioContext || window.webkitAudioContext)();
show();
function show() {
frequency = document.getElementById("fIn").value;
document.getElementById("fOut").innerHTML = frequency + ' Hz';
switch (document.getElementById("tIn").value * 1) {
case 0: type = 'sine'; break;
case 1: type = 'square'; break;
case 2: type = 'sawtooth'; break;
case 3: type = 'triangle'; break;
}
document.getElementById("tOut").innerHTML = type;
volume = document.getElementById("vIn").value / 100;
document.getElementById("vOut").innerHTML = volume;
duration = document.getElementById("dIn").value;
document.getElementById("dOut").innerHTML = duration + ' ms';
}
function beep() {
var oscillator = audioCtx.createOscillator();
var gainNode = audioCtx.createGain();
oscillator.connect(gainNode);
gainNode.connect(audioCtx.destination);
gainNode.gain.value = volume;
oscillator.frequency.value = frequency;
oscillator.type = type;
oscillator.start();
setTimeout(
function() {
oscillator.stop();
},
duration
);
};frequency
<input type="range" id="fIn" min="40" max="6000" oninput="show()" />
<span id="fOut"></span><br>
type
<input type="range" id="tIn" min="0" max="3" oninput="show()" />
<span id="tOut"></span><br>
volume
<input type="range" id="vIn" min="0" max="100" oninput="show()" />
<span id="vOut"></span><br>
duration
<input type="range" id="dIn" min="1" max="5000" oninput="show()" />
<span id="dOut"></span>
<br>
<button onclick='beep();'>Play</button>즐기세요!
Houshalter에서 해결책을 얻었습니다. Javascript 경고음을 어떻게 만들 수 있습니까?
여기에서 코드를 복제하고 조정할 수 있습니다 . JS Bin의 톤 신디사이저 데모
호환되는 브라우저 :
- Chrome 모바일 및 데스크톱
- Firefox 모바일 및 데스크톱 Opera 모바일, 미니 및 데스크톱
- 안드로이드 브라우저
- Microsoft Edge 브라우저
- iPhone 또는 iPad의 Safari
호환되지 않음
- Internet Explorer 버전 11 (하지만 Edge 브라우저에서 작동 함)
wav-e 파일을 즉석에서 생성하고 재생할 수 있습니다 ( src ).
// Legend
// DUR - duration in seconds SPS - sample per second (default 44100)
// NCH - number of channels BPS - bytes per sample
// t - is number from range [0, DUR), return number in range [0, 1]
function getSampleAt(t,DUR,SPS)
{
return Math.sin(6000*t);
}
function genWAVUrl(fun, DUR=1, NCH=1, SPS=44100, BPS=1) {
let size = DUR*NCH*SPS*BPS;
let put = (n,l=4) => [(n<<24),(n<<16),(n<<8),n].filter((x,i)=>i<l).map(x=> String.fromCharCode(x>>>24)).join('');
let p = (...a) => a.map( b=> put(...[b].flat()) ).join('');
let data = `RIFF${put(44+size)}WAVEfmt ${p(16,[1,2],[NCH,2],SPS,NCH*BPS*SPS,[NCH*BPS,2],[BPS*8,2])}data${put(size)}`
for (let i = 0; i < DUR*SPS; i++) {
let f= Math.min(Math.max(fun(i/SPS,DUR,SPS),0),1);
data += put(Math.floor( f * (2**(BPS*8)-1)), BPS);
}
return "data:Audio/WAV;base64," + btoa(data);
}
var WAV = new Audio( genWAVUrl(getSampleAt,5) ); // 5s
WAV.setAttribute("controls", "controls");
document.body.appendChild(WAV);
//WAV.play()여기에 시각화가 있습니다
function getSampleAt(t,DUR,SPS)
{
return 0.5+Math.sin(15*t)/(1+t*t);
}
// ----------------------------------------------
function genWAVUrl(fun, DUR=1, NCH=1, SPS=44100, BPS=1) {
let size = DUR*NCH*SPS*BPS;
let put = (n,l=4) => [(n<<24),(n<<16),(n<<8),n].filter((x,i)=>i<l).map(x=> String.fromCharCode(x>>>24)).join('');
let p = (...a) => a.map( b=> put(...[b].flat()) ).join('');
let data = `RIFF${put(44+size)}WAVEfmt ${p(16,[1,2],[NCH,2],SPS,NCH*BPS*SPS,[NCH*BPS,2],[BPS*8,2])}data${put(size)}`
for (let i = 0; i < DUR*SPS; i++) {
let f= Math.min(Math.max(fun(i/SPS,DUR,SPS),0),1);
data += put(Math.floor( f * (2**(BPS*8)-1)), BPS);
}
return "data:Audio/WAV;base64," + btoa(data);
}
function draw(fun, DUR=1, NCH=1, SPS=44100, BPS=1) {
time.innerHTML=DUR+'s';
time.setAttribute('x',DUR-0.3);
svgCh.setAttribute('viewBox',`0 0 ${DUR} 1`);
let p='', n=100; // n how many points to ommit
for (let i = 0; i < DUR*SPS/n; i++) p+= ` ${DUR*(n*i/SPS)/DUR}, ${1-fun(n*i/SPS, DUR,SPS)}`;
chart.setAttribute('points', p);
}
function frame() {
let t=WAV.currentTime;
point.setAttribute('cx',t)
point.setAttribute('cy',1-getSampleAt(t))
window.requestAnimationFrame(frame);
}
function changeStart(e) {
var r = e.target.getBoundingClientRect();
var x = e.clientX - r.left;
WAV.currentTime = dur*x/r.width;
WAV.play()
}
var dur=5; // seconds
var WAV = new Audio(genWAVUrl(getSampleAt,dur));
draw(getSampleAt,dur);
frame();.chart { border: 1px dashed #ccc; }
.axis { font-size: 0.2px}
audio { outline: none; }Click at blue line (make volume to max):
<svg class="chart" id="svgCh" onclick="changeStart(event)">
<circle cx="0" cy="-1" r="0.05" style="fill: rgba(255,0,0,1)" id="point"></circle>
<polyline id="chart" fill="none" stroke="#0074d9" stroke-width="0.01" points=""/>
<text x="0.03" y="0.9" class="axis">0</text>
<text x="0.03" y="0.2" class="axis">1</text>
<text x="4.8" y="0.9" class="axis" id="time"></text>
</svg><br>JavaScript 솔루션을 요청했기 때문에 귀하의 질문에 대한 실제 답변은 아니지만 ActionScript를 사용할 수 있습니다. 모든 주요 브라우저에서 실행되어야합니다.
JavaScript 내에서 ActionScript 함수를 호출 할 수 있습니다.
이러한 방식으로 ActionScript 사운드 생성 함수를 래핑하고 JavaScript로 구현할 수 있습니다. Adobe Flex를 사용하여 작은 swf를 만든 다음 JavaScript 코드의 백엔드로 사용하십시오.
이것은 내가 영원히 찾고 있던 것이며 결국 내가 원하는대로 스스로 할 수있었습니다. 아마도 당신도 그것을 좋아할 것입니다. 주파수 및 푸시 온 / 오프가있는 간단한 슬라이더 :
buttonClickResult = function () {
var button = document.getElementById('btn1');
button.onclick = function buttonClicked() {
if(button.className=="off") {
button.className="on";
oscOn ();
}
else if(button.className=="on") {
button.className="off";
oscillator.disconnect();
}
}
};
buttonClickResult();
var oscOn = function(){
window.AudioContext = window.AudioContext || window.webkitAudioContext;
var context = new AudioContext();
var gainNode = context.createGain ? context.createGain() : context.createGainNode();
//context = new window.AudioContext();
oscillator = context.createOscillator(),
oscillator.type ='sine';
oscillator.frequency.value = document.getElementById("fIn").value;
//gainNode = createGainNode();
oscillator.connect(gainNode);
gainNode.connect(context.destination);
gainNode.gain.value = 1;
oscillator.start(0);
};<p class="texts">Frekvence [Hz]</p>
<input type="range" id="fIn" min="20" max="20000" step="100" value="1234" oninput="show()" />
<span id="fOut"></span><br>
<input class="off" type="button" id="btn1" value="Start / Stop" />참고 URL : https://stackoverflow.com/questions/6343450/generating-sound-on-the-fly-with-javascript-html5
'Program Tip' 카테고리의 다른 글
| 더 큰 애플리케이션 범위를 제공하기 위해 이전 버전의 libc에 대한 링크 (0) | 2020.11.21 |
|---|---|
| 동일한 열에서 여러 WHERE 조건으로 선택 (0) | 2020.11.21 |
| 필드 대 속성. (0) | 2020.11.21 |
| PHP의 "easter egg"URL을 비활성화하려면 어떻게해야합니까? (0) | 2020.11.21 |
| Angular의 $ q.reject () 대 deferred.reject () (0) | 2020.11.21 |