미디어 이벤트를 사용하여 진행률 표시줄 추가

media 개체는 audio 개체가 사용할 수 있는 엄선된 풍부한 이벤트들을 제공합니다. 특정 이벤트 그룹을 통해 오디오 파일의 재생 진행 상황을 추적하는 데 사용할 수 있는 상태 데이터를 가져올 수 있습니다.

상태 이벤트 사용

HTML5 media 개체는 audiovideo 개체와 공유하는 많은 메서드, 속성 및 이벤트들을 제공합니다. 이 항목에서는 media 이벤트를 여러 개 등록하여 현재 재생 모드에 있는 오디오 파일의 진행 상황을 추적하는 방법을 배웁니다.

JavaScript를 사용하여 audio 개체 제어의 예제에서 이벤트를 사용하여 파일 상태를 표시할 수 있습니다. 한 이벤트는 진행률 표시줄을 구동하고 다른 이벤트는 웹 페이지 로드가 완료될 때 이벤트를 로드합니다.

다음 예제에서는 파일이 재생 중일 때와 일시 중지될 때 발생하는 이벤트를 보여 줍니다. 이벤트를 사용하여 재생 단추의 레이블을 전환합니다. 오디오 파일이 재생 중이면 단추 레이블에 "일시 중지"가 표시되고, 파일이 일시 중지되면 단추 레이블에 "재생"이 표시됩니다.

참고  인트라넷에서 개발하는 경우 HTML5에 대한 렌더링 문제가 있으면 <meta http-equiv-“X-UA-Compatible” content=”IE=9”/>를 웹 페이지의 <head> 블록에 추가하여 Windows Internet Explorer 9에서 최신 표준을 사용하도록 할 수 있습니다. 원하는 경우 meta http-equiv-"X-UA-Compatible" 헤더를 IE=9과 함께 보내도록 웹 개발 서버를 구성합니다. 문서 호환성에 대한 자세한 내용은 문서 호환성 정의를 참조하세요.

                var oAudio = document.getElementById('myaudio');

                //set up event to toggle play button to pause when playing
                oAudio.addEventListener("playing", function() {
                    document.getElementById("play").textContent = "Pause";
                }, true);

                //set up event to toggle play button to play when paused
                oAudio.addEventListener("pause", function() {
                    document.getElementById("play").textContent = "Play";
                }, true);


상태 이벤트 외에도 스크립트가 처음 로드될 때 DOMContentLoaded 이벤트가 등록됩니다. Internet Explorer 9에서 새로 추가된 이 이벤트는 DOM(Document Object Model) 및 스크립트 내용이 모두 로드되었을 때 발생합니다. 이 이벤트를 사용하면 이미지와 내용이 로드될 때까지 기다리지 않고도 필요한 요소가 로드되었는지 확인할 수 있습니다. 이 이벤트는 발생 시 다른 이벤트를 로드하는 함수를 호출합니다.


            //this event gets fired when a page has loaded
            window.addEventListener("DOMContentLoaded", initEvents, false);


앞으로 건너뛰기 및 뒤로 건너뛰기 함수에 대해서는 JavaScript를 사용하여 audio 개체 제어에서 설명합니다.

진행률 표시줄 추가

JavaScript를 사용하여 audio 개체 제어 항목에 표시된 것처럼 audio 개체는 currentTime 속성을 사용하여 현재 재생 위치를 추적합니다. currentTime 속성을 초기화하여 currentTime 오디오 파일을 샅샅이 검색할 수 있습니다. timeupdate 이벤트를 사용하면 시간이 변경될 때 시간을 가져오고 표시할 수 있습니다. currentTime 속성을 사용하여 진행률 표시줄을 업데이트할 수도 있습니다.

timeupdate 이벤트는 오디오 파일이 재생될 때 currentTime 이 변경될 때마다 발생합니다. 다음 예제에서는 currentTime이 변경될 때 시작되는 timeupdate 이벤트를 등록합니다.


                //set up event to update the progress bar
                oAudio.addEventListener("timeupdate", progressBar, true); 


timeupdate 이벤트는 발생 시 progressBar 함수를 호출하며, 이 함수가 진행률 표시줄을 업데이트합니다.

progressBar 함수는 먼저 Math.round 메서드를 사용하여 currentTime을 가져와서 가장 근사한 정수로 반올림함으로써 elapsedTime 값을 얻습니다. 여기서는 진행률 표시줄을 위해 이 값을 반올림할 필요가 없지만 인쇄 시 문제를 방지하려면 반올림하는 것이 좋습니다.


            function progressBar() { 
                var oAudio = document.getElementById('myaudio'); 
                //get current time in seconds
                var elapsedTime = Math.round(oAudio.currentTime);
                //update the progress bar
                if (canvas.getContext) {
                    var ctx = canvas.getContext("2d");
                    //clear canvas before painting
                    ctx.clearRect(0, 0, canvas.clientWidth, canvas.clientHeight);
                    ctx.fillStyle = "rgb(255,0,0)";
                    var fWidth = (elapsedTime / oAudio.duration) * (canvas.clientWidth);
                    if (fWidth > 0) {
                        ctx.fillRect(0, 0, fWidth, canvas.clientHeight);
                    }
                }
            }


진행률 표시줄은 canvas 요소를 사용하여 직사각형 영역을 만듭니다. 이 영역이 채워지는 진행 상황을 통해 오디오 파일 내의 현재 위치를 확인할 수 있습니다. Canvas는 그래픽을 그리거나 이미지를 표시하는 데 사용할 수 있는 메서드와 속성을 가진 고급 그래픽 영역을 제공하는 HTML5 요소입니다. canvas 요소를 사용하는 경우 사용 전에 기능을 테스트하는 것이 좋습니다. canvas 요소를 사용하면 audio 요소와 마찬가지로 페이지의 HTML 부분에 장애 조치(failover) 텍스트나 코드를 넣을 수 있습니다.


        <audio id="myaudio">
            HTML5 audio not supported
        </audio>



            <canvas id="canvas" width="500" height="20">
                canvas not supported
            </canvas>


예제의 JavaScript 부분에 포함된 코드는 document.getElementById()에서 반환되는 canvas 개체를 테스트합니다. canvas 태그가 지원되는 경우 개체를 가져오고, 그렇지 않으면 정의되지 않았다는 메시지가 반환됩니다. 그런 다음 JavaScript 코드는 getContext 메서드 지원을 확인하고 이 메서드를 호출하여 contextRenderingContext2D 개체를 "ctx" 변수에 반환합니다. 현재 Internet Explorer 9에서는 2d 컨텍스트들만 지원되지만 W3C는 다른 유형의 컨텍스트들을 허용했습니다.

contextRenderingContext2D 개체에는 canvas 요소에 그래픽을 만들고 이미지를 표시하는 데 사용하는 그리기 및 그래픽 메서드와 속성이 대부분 포함되어 있습니다. progressBar 함수를 호출할 때마다 canvas가 지워져 사용자가 파일에서 뒤로 이동할 때 잘못 표시되는 문제를 방지합니다. 채우기 너비는 currentTime 값을 audio 개체의 duration 속성으로 나누어 계산합니다. 그러면 결과는 canvasclientWidth가 곱해져서 canvas의 너비 비율이 지정됩니다. 그런 다음 이 값을 fillRect 메서드에 사용하여 canvas를 채웁니다.

canvas 위에 그래픽이 없으면 설정된 색이 없습니다. 다음 예제에서는 CSS(Cascading Style Sheets) 스타일을 사용하여 canvas 진행률 표시줄의 윤곽선을 그립니다. 윤곽선이 없으면 파일 재생이 시작될 때까지 표시줄이 보이지 않습니다.

진행률 표시줄을 사용하여 오디오 파일 내에서 이동할 수도 있습니다. 마우스 click 이벤트는 클릭하는 위치에 상대적인 위치에서 currentTime을 업데이트하는 함수에 등록됩니다. 진행률 표시줄을 클릭하면 다음 예제와 같이 canvas 내 커서의 상대 X 위치를 기준으로 currentTime이 계산되고 설정됩니다.


                //set up mouse click to control position of audio
                canvas.addEventListener("click", function(e) {
                    //this might seem redundant, but this these are needed later - make global to remove these
                    var oAudio = document.getElementById('myaudio'); 
                    var canvas = document.getElementById('canvas');            

                    if (!e) {
                        e = window.event;
                    } //get the latest windows event if it isn't set
                    try {
                        //calculate the current time based on position of mouse cursor in canvas box
                        oAudio.currentTime = oAudio.duration * (e.offsetX / canvas.clientWidth);
                    }
                    catch (err) {
                    // Fail silently but show in F12 developer tools console
                        if (window.console && console.error("Error:" + err));
                    }
                }, true);
            }


이전 함수와 코드 예제에서는 웹 페이지에서 오디오 파일을 재생하고 진행률 표시줄을 표시하고 오디오 파일의 재생 위치를 제어하는 방법의 기본 사항을 보여 줍니다. 다음 예제는 필요할 때마다 불연속 호출을 사용하여 canvasaudio 개체를 가져옵니다. 해당 코드에서 전역 변수를 만들거나 고유한 전역 개체에 플레이어를 캡슐화할 수도 있습니다.

플레이어를 확장하여 재생 목록을 사용하거나, 변화하는 이미지를 음악 재생으로 표시하거나, 여러 audio 요소를 사용하거나, 샘플링된 오디오를 통해 가상 계측을 만들 수 있습니다.

다음 예제에는 이 항목의 모든 코드 예제가 포함되어 있으며 이러한 코드 예제가 결합되어 전체 프로세스를 보여 줍니다. 이 예제를 복사하고 HTML 파일에 붙여 넣은 다음 사용해 보세요.


<!DOCTYPE html>
<html>
    
    <head>
         
        <title>Using media events to add a progress bar to an audio player</title>
        <!-- Uncomment the following meta tag if you have issues rendering this page on an intranet site. -->    
        <!--  <meta http-equiv="X-UA-Compatible" content="IE=9"/> --> 
        <style id="inlinecss" type="text/css">
            /* put a border around the canvas element */
            #canvas  
            {
                margin-top:10px; 
                border-style:solid; 
                border-width:1px; 
                padding:3px; 
            }
        </style>
        <script type="text/javascript">
            //Global variable to track current file name        
            var currentFile = "";

            //display and update progress bar
            function progressBar() { 
                var oAudio = document.getElementById('myaudio'); 
                //get current time in seconds
                var elapsedTime = Math.round(oAudio.currentTime);
                //update the progress bar
                if (canvas.getContext) {
                    var ctx = canvas.getContext("2d");
                    //clear canvas before painting
                    ctx.clearRect(0, 0, canvas.clientWidth, canvas.clientHeight);
                    ctx.fillStyle = "rgb(255,0,0)";
                    var fWidth = (elapsedTime / oAudio.duration) * (canvas.clientWidth);
                    if (fWidth > 0) {
                        ctx.fillRect(0, 0, fWidth, canvas.clientHeight);
                    }
                }
            }
            //Play and pause function 
            function playAudio() {
                try {
                    //return objects we need to work with 
                    var oAudio = document.getElementById('myaudio'); 
                    var btn = document.getElementById('play');
                    var audioURL = document.getElementById('audiofile');               

                    //Skip loading if current file hasn't changed.
                    if (audioURL.value !== currentFile) {
                        oAudio.src = audioURL.value;
                        currentFile = audioURL.value;                        
                    }

                    //Tests the paused attribute and set state. 
                    if (oAudio.paused) {
                        oAudio.play();
                        btn.textContent = "Pause";
                    }
                    else {
                        oAudio.pause();
                        btn.textContent = "Play";
                    }
                }
                catch (e) {
                    // Fail silently but show in F12 developer tools console
                    if (window.console && console.error("Error:" + e));
                }
            }

            //Rewinds the audio file by 30 seconds.
            function rewindAudio() {
                try {
                    var oAudio = document.getElementById('myaudio');
                    oAudio.currentTime -= 30.0;
                }
                catch (e) {
                    // Fail silently but show in F12 developer tools console
                    if (window.console && console.error("Error:" + e));
                }
            }

            //Fast forwards the audio file by 30 seconds.
            function forwardAudio() {
                try {
                    var oAudio = document.getElementById('myaudio');
                    oAudio.currentTime += 30.0;
                }
                catch (e) {
                    // Fail silently but show in F12 developer tools console
                    if (window.console && console.error("Error:" + e));
                }
            }

            //Restart the audio file to the beginning.

            function restartAudio() {
                try {
                    var oAudio = document.getElementById('myaudio');
                    oAudio.currentTime = 0;
                }
                catch (e) {
                    // Fail silently but show in F12 developer tools console
                    if (window.console && console.error("Error:" + e));
                }
            }

            //added events

            function initEvents() {
                var canvas = document.getElementById('canvas');  
                var oAudio = document.getElementById('myaudio');

                //set up event to toggle play button to pause when playing
                oAudio.addEventListener("playing", function() {
                    document.getElementById("play").textContent = "Pause";
                }, true);

                //set up event to toggle play button to play when paused
                oAudio.addEventListener("pause", function() {
                    document.getElementById("play").textContent = "Play";
                }, true);
                //set up event to update the progress bar
                oAudio.addEventListener("timeupdate", progressBar, true); 
                //set up mouse click to control position of audio
                canvas.addEventListener("click", function(e) {
                    //this might seem redundant, but this these are needed later - make global to remove these
                    var oAudio = document.getElementById('myaudio'); 
                    var canvas = document.getElementById('canvas');            

                    if (!e) {
                        e = window.event;
                    } //get the latest windows event if it isn't set
                    try {
                        //calculate the current time based on position of mouse cursor in canvas box
                        oAudio.currentTime = oAudio.duration * (e.offsetX / canvas.clientWidth);
                    }
                    catch (err) {
                    // Fail silently but show in F12 developer tools console
                        if (window.console && console.error("Error:" + err));
                    }
                }, true);
            }
            //this event gets fired when a page has loaded
            window.addEventListener("DOMContentLoaded", initEvents, false);
        </script>
    </head>    
    <body>
        <h1>HTML5 audio player with progress bar</h1>
        <p>
            <input type="text" id="audiofile" size="80" value="demo.mp3" />
        </p>
        <audio id="myaudio">
            HTML5 audio not supported
        </audio>
        <p>
            <button id="play" onclick="playAudio();" disabled>
                Play
            </button>
            <button id="rewind" onclick="rewindAudio();" disabled>
                Rewind
            </button>
            <button id="forward" onclick="forwardAudio();" disabled>
                Fast forward
            </button>
            <button id="restart" onclick="restartAudio();" disabled>
                Restart
            </button>
        </p>
        <p>
            <canvas id="canvas" width="500" height="20">
                canvas not supported
            </canvas>
        </p>
        <script type="text/javascript">
            //Check for support and enable buttons
            if (window.HTMLAudioElement) {
                document.getElementById("play").disabled = false;
                document.getElementById("rewind").disabled = false;
                document.getElementById("forward").disabled = false;
                document.getElementById("restart").disabled = false;
            }
        </script>
    </body>

</html>


참고  이 예제의 일부 함수에는 파일을 로드하지 않고 앞으로 건너뛰기를 시도하는 등, 발생할 수 있는 예외 사항을 자동으로 잡아내는 try/catch 문이 포함되어 있습니다. F12 개발자 도구들인 콘솔이나 스크립트 탭으로 오류를 보내는 코드도 포함되어 있습니다. 자세한 내용은 F12 도구 콘솔을 사용하여 오류 및 상태 보기를 참조하세요.

관련 항목

HTML5 오디오 요소 시작
HTML5를 사용하여 웹 페이지에 오디오 플레이어를 추가하는 방법
JavaScript를 사용하여 오디오 개체 제어

 

 

표시:
© 2015 Microsoft