この記事は3年以上前に書かれた記事で内容が古い可能性があります
ブラウザだけで音楽を流してみる
2016-10-30
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>
