Skip to main content
インデントのミスを修正
ソース リンク
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <title>音声再生のテスト</title>
    <script>//<![CDATA[
        var context = null;
        var dogBarkingBuffer = null;
        
        function init()
        {
            try {
                window.AudioContext = window.AudioContext || window.webkitAudioContext;
                context = new AudioContext();
            }
            catch(e) {
                context = null;
                alert("このブラウザではWeb Audio APIがサポートされていません。");
            }
        }
    
        function load(url)
        {
            if (!context) { return; }
            var request = new XMLHttpRequest();
            request.open('GET', url, true);
            request.responseType = 'arraybuffer';
            request.onload = function() {
                context.decodeAudioData(
                    request.response,
                    function(buffer) {
                        dogBarkingBuffer = buffer;
                        document.getElementById("play").disabled = false;
                    },
                    function()
                    {
                        alert("音声ファイルの読み込みに失敗しました。");
                    });
            }
            request.send();
        }
        
        function playAudio()
        {
            if (!dogBarkingBuffer) { return; }
            var source = context.createBufferSource();
            source.buffer = dogBarkingBuffer;
            source.connect(context.destination);
            source.start(0); // 同じ音声ならstartだけでも良い?
        }
    //]]></script>
</head>
<body onload="init(); load('sample.wav')">
    <form name="form">
        <p><input type="button" id="play" name="play" value="再生" onclick="playAudio()" disabled /></p>
    </form>
</body>
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <title>音声再生のテスト</title>
    <script>//<![CDATA[
        var context = null;
        var dogBarkingBuffer = null;
        
        function init()
        {
            try {
                window.AudioContext = window.AudioContext || window.webkitAudioContext;
                context = new AudioContext();
            }
            catch(e) {
                context = null;
                alert("このブラウザではWeb Audio APIがサポートされていません。");
            }
        }
    
        function load(url)
        {
            if (!context) { return; }
            var request = new XMLHttpRequest();
            request.open('GET', url, true);
            request.responseType = 'arraybuffer';
            request.onload = function() {
                context.decodeAudioData(
                    request.response,
                    function(buffer) {
                    dogBarkingBuffer = buffer;
                    document.getElementById("play").disabled = false;
                    },
                    function()
                    {
                        alert("音声ファイルの読み込みに失敗しました。");
                    });
            }
            request.send();
        }
        
        function playAudio()
        {
            if (!dogBarkingBuffer) { return; }
            var source = context.createBufferSource();
            source.buffer = dogBarkingBuffer;
            source.connect(context.destination);
            source.start(0);
        }
    //]]></script>
</head>
<body onload="init(); load('sample.wav')">
    <form name="form">
        <p><input type="button" id="play" name="play" value="再生" onclick="playAudio()" disabled /></p>
    </form>
</body>
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <title>音声再生のテスト</title>
    <script>//<![CDATA[
        var context = null;
        var dogBarkingBuffer = null;
        
        function init()
        {
            try {
                window.AudioContext = window.AudioContext || window.webkitAudioContext;
                context = new AudioContext();
            }
            catch(e) {
                context = null;
                alert("このブラウザではWeb Audio APIがサポートされていません。");
            }
        }
    
        function load(url)
        {
            if (!context) { return; }
            var request = new XMLHttpRequest();
            request.open('GET', url, true);
            request.responseType = 'arraybuffer';
            request.onload = function() {
                context.decodeAudioData(
                    request.response,
                    function(buffer) {
                        dogBarkingBuffer = buffer;
                        document.getElementById("play").disabled = false;
                    },
                    function()
                    {
                        alert("音声ファイルの読み込みに失敗しました。");
                    });
            }
            request.send();
        }
        
        function playAudio()
        {
            if (!dogBarkingBuffer) { return; }
            var source = context.createBufferSource();
            source.buffer = dogBarkingBuffer;
            source.connect(context.destination);
            source.start(0); // 同じ音声ならstartだけでも良い?
        }
    //]]></script>
</head>
<body onload="init(); load('sample.wav')">
    <form name="form">
        <p><input type="button" id="play" name="play" value="再生" onclick="playAudio()" disabled /></p>
    </form>
</body>
ソース リンク

Audio要素は簡単に音声を再生する分には問題ありませんが、
短い間隔の再生や和音などを行おうとすると上手くいかないことが多いです。

Audio要素を使うのであれば、
再生が終わるまでボタンを無効にしておくような実装が好ましいかと思います。

もしもより高度な音声再生を行いたいのであれば、
Web Audio APIをご利用ください。

以下のコードは、
Google Chromeで動作確認したものになります。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <title>音声再生のテスト</title>
    <script>//<![CDATA[
        var context = null;
        var dogBarkingBuffer = null;
        
        function init()
        {
            try {
                window.AudioContext = window.AudioContext || window.webkitAudioContext;
                context = new AudioContext();
            }
            catch(e) {
                context = null;
                alert("このブラウザではWeb Audio APIがサポートされていません。");
            }
        }
    
        function load(url)
        {
            if (!context) { return; }
            var request = new XMLHttpRequest();
            request.open('GET', url, true);
            request.responseType = 'arraybuffer';
            request.onload = function() {
                context.decodeAudioData(
                    request.response,
                    function(buffer) {
                    dogBarkingBuffer = buffer;
                    document.getElementById("play").disabled = false;
                    },
                    function()
                    {
                        alert("音声ファイルの読み込みに失敗しました。");
                    });
            }
            request.send();
        }
        
        function playAudio()
        {
            if (!dogBarkingBuffer) { return; }
            var source = context.createBufferSource();
            source.buffer = dogBarkingBuffer;
            source.connect(context.destination);
            source.start(0);
        }
    //]]></script>
</head>
<body onload="init(); load('sample.wav')">
    <form name="form">
        <p><input type="button" id="play" name="play" value="再生" onclick="playAudio()" disabled /></p>
    </form>
</body>

参考:http://www.html5rocks.com/ja/tutorials/webaudio/intro/