iOSのMobile SafariでWeb Audio API を利用してサウンドを再生する
iOSのMobile SafariでWeb Audio API を利用してサウンドを再生するコードを紹介します。
方法1: ページの表示時にHttpRequestを初期化する方法
ページの表示時にHttpRequestを初期化するコードを紹介します。下記のHTMLファイルを作成します。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, user-scale=yes, initial-scale=1.0, maximum-scale=5.0" />
<script type="text/javascript">
var request, source;
window.onload = function () {
request = new XMLHttpRequest();
request.open("GET", "sound2.mp3", true);
request.responseType = "arraybuffer";
request.onload = completeOnLoad;
request.send();
};
function completeOnLoad() {
window.AudioContext = window.AudioContext || window.webkitAudioContext;
context = new AudioContext();
// オーディオをデコード
context.decodeAudioData(request.response, function (buf) {
source.buffer = buf;
source.loop = false;
});
source = context.createBufferSource();
var elem = document.getElementById("Play");
elem.addEventListener("click", playStart, false);
}
function playStart() {
source.connect(context.destination);
source.start(0);
}
</script>
</head>
<body>
<a id="Play" href="javascript:void(0);">再生</a><br />
</body>
</html>
解説
window.onload = function () {
request = new XMLHttpRequest();
request.open("GET", "sound2.mp3", true);
request.responseType = "arraybuffer";
request.onload = completeOnLoad;
request.send();
};
ページ表示時に上記の関数が実行され、HttpRequestが初期化されます。再生したいサウンドファイルへのアクセスを設定します。またonloadイベントにはcompleteOnLoad()関数を設定し、サウンドファイルの読み込み完了後、completeOnLoad()を実行します。
function completeOnLoad() {
window.AudioContext = window.AudioContext || window.webkitAudioContext;
context = new AudioContext();
// オーディオをデコード
context.decodeAudioData(request.response, function (buf) {
source.buffer = buf;
source.loop = false;
});
source = context.createBufferSource();
var elem = document.getElementById("Play");
elem.addEventListener("click", playStart, false);
}
サウンドファイル読み込み後に上記の関数を実行します。AudioContextオブジェクトを作成し、デコード処理を実装します。また、再生用のバッファソースを作成します。また、addEventListener()メソッドを用いて[再生]リンクにクリックイベントを設定します。
function playStart() {
source.connect(context.destination);
source.start(0);
}
リンクがクリックされたときの処理です。バッファソースに接続し、再生を開始します。
方法2: リンクのクリックなどのアクション時にHttpRequestを初期化する方法
ページの読み込み時ではなく、リンクなどがクリックされたタイミングでHttpRequestを初期化するコードを紹介します。
下記のHTMLファイルを作成します。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, user-scale=yes, initial-scale=1.0, maximum-scale=5.0" />
<script type="text/javascript">
//iOS版
var request;
function clickPlay() {
window.AudioContext = window.AudioContext || window.webkitAudioContext;
context = new AudioContext();
context.createBufferSource().start(0);
request = new XMLHttpRequest();
request.open("GET", "sound2.mp3", true);
request.responseType = "arraybuffer";
request.onload = completeOnLoad;
request.send();
};
function completeOnLoad() {
var elem = document.getElementById("Play");
elem.innerText = "再生中";
source = context.createBufferSource();
// オーディオをデコード
context.decodeAudioData(request.response, function (buf) {
source.buffer = buf;
source.loop = false;
source.connect(context.destination);
source.start(0);
});
}
</script>
</head>
<body>
<a id="Play" href="javascript:void(0);" onclick="clickPlay();">読み込み</a><br />
</body>
</html>
解説
こちらのコードの詳細な解説は
こちらの記事を参照してください。
著者
iPentecのメインプログラマー
C#, ASP.NET の開発がメイン、少し前まではDelphiを愛用
