Audio

１．audio 再生時間が変わった時に発生するイベント
timeUpdate　--> chromeの場合、0.25秒ごとイベント発生


２．audioメソッド

audio.play()
audio.pause()
audio.load()          



３．audioプロパティ

audio.duration
audio.currentTime
audio.volume           ---> 0以下、1以上の場合エラー
audio.playbackRate
audio.paused
audio.ended
audio.error
audio.readyState
audio.networkState


-----------------------------------------------------------

audioメソッド

audio.play()     再生
audio.pause()   停止
audio.load()     再ロード



audioプロパティ

audio.duration　     メディアの長さ
audio.currentTime  再生位置
audio.volume         音量(0 ~ 1 --> +0.1, -0.1)
audio.playbackRate スピード(+0.5, -0,5)
audio.paused          停止状態判定
audio.ended　　　　　終了状態判定
audio.error            エラーの状態（何もなければnull)
audio.readyState　　メディアの準備状態　
audio.networkState　ネットワーク状態


play開始前
-----------------------

readState :null  

readyState :0             何も準備できてない

networkState :3         リソースがみつからない

play後（play後停止、終了しても状態は同じ）

-------------------------

error :null

readyState :4          HAVE_ENOUGH_DATA 充分に完了

networkState :1　　　NETWORK_IDLE　利用停止状態

                            最初は 2 (データダウンロード中)--> 1

        <button id="play">play</button>
        <button id="pause">pause</button>
        <button id="load">load</button>
        <button id="end">終了</button>        
        <button id="currenTime">currentTime最初から</button>
        <button id="volumeDown">volume-</button>
        <button id="volumeUp">volume+</button>      
        <button id="playbackRateUp">playbackRate+</button>
        <button id="playbackRateDown">playbackRate-</button>      
        <div id="info"></div>
        <div id="infoVolume"></div>
        <div id="infoCurrentTime"></div>      
        <div id="infoDuration"></div>
        <div id="infoPlaybackRate"></div>
        <div id="infoError">エラーなし</div>    
        <div id="infoReadyState">準備状態</div>
        <div id="infoNetworkState">ネットワーク状態</div>  


        <script type="text/javascript">
            var audio = new Audio();
            audio.src = "http://www.noiseaddicts.com/samples_1w72b820/2558.mp3";

            // 再生時間が変わった時にtimeupdateイベント発生：chromeの場合0.25秒ごとに呼ばれる
            audio.addEventListener("timeupdate", displayInfo);

            $('play').addEventListener("click", play);
            $('pause').addEventListener("click", pause);
            $('currenTime').addEventListener("click", currentTime(0));
            $('volumeUp').addEventListener("click", volume(true));
            $('volumeDown').addEventListener("click", volume(false));
            $('playbackRateUp').addEventListener("click", playbackRate(true));
            $('playbackRateDown').addEventListener("click", playbackRate(false));
            $('load').addEventListener("click", load);
            $('end').addEventListener("click", end);
            $('infoError').innerHTML = "readState :" + audio.error;
            $('infoReadyState').innerHTML = "readyState :" + audio.readyState;
            $('infoNetworkState').innerHTML = "networkState :" + audio.networkState;

            function displayInfo() {
                $('infoVolume').innerHTML = "infoVolume :" + audio.volume;
                $('infoCurrentTime').innerHTML = "infoCurrentTime :" + audio.currentTime;
                $('infoDuration').innerHTML = "infoDurationvolume :" + audio.duration;
                $('infoPlaybackRate').innerHTML = "infoPlaybackRate :" + audio.playbackRate;
                $('infoError').innerHTML = "error :" + audio.error;
                $('infoReadyState').innerHTML = "readyState :" + audio.readyState;
                $('infoNetworkState').innerHTML = "networkState :" + audio.networkState;

                // 終了状態の場合
                if (audio.ended) {
                    return $('info').innerHTML = '終了';
                }
                // 停止状態の場合
                else if (audio.paused) {
                    return $('info').innerHTML = '停止';
                } else {
                    return $('info').innerHTML = '';
                }
            }

            function play() {
                audio.play();
            }

            function pause() {
                audio.pause();
            }

            function load() {
                $('info').innerHTML = "再読み込み!(audio.load())";
                audio.load();
            }

            function end() {
                debugger;
                audio.currentTime = audio.duration;
            }

            function volume(upFlg) {
                return function () {
                    if ((upFlg && audio.volume === 1) || (!upFlg && audio.volume === 0)) {
                        return;
                    }

                    if (upFlg) {
                        audio.volume += 0.1;
                    } else {
                        audio.volume -= 0.1;
                    }
                };
            }

            function currentTime(time) {
                return function () {
                    audio.currentTime = time;
                };
            }

            function playbackRate(upFlg) {
                return function () {
                    if (upFlg) {
                        audio.playbackRate += 0.5;
                    } else {
                        audio.playbackRate -= 0.5;
                    }
                };
            }

            function $(id) {
                return document.getElementById(id);
            }

        </script>