카테고리 없음

HTML5 오디오 / 비디오

Canyi 2022. 10. 27. 11:15

WAV : Row format 

https://crystalcube.co.kr/123

 

wav 파일 헤더구조

웨이브(.wav) 파일 분석 오늘은 음성파일인 .wav 에 대해 살펴보려 합니다. 이에 앞서 정확한 의미부터 짚고 넘어가도록 하겠습니다. WAV 또는 WAVE는 웨이브폼 오디오 포맷(웨이브 오디오 포맷, Wavefo

crystalcube.co.kr

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Audio</title>
</head>
<body>
    <audio src="SleepAway.mp3" type = "audio/mp3" autoplay = "autoplay" controls = "controls" loop = "loop"></audio>
</body>
</html>

controls:  mp3 플레이어 표시

loop: 반복하기

 

SleepAway.mp3
4.62MB

 

 

함수로 migration

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Audio</title>
</head>
<body>
    <!-- <audio src="SleepAway.mp3" type = "audio/mp3" autoplay = "autoplay" controls = "controls" loop = "loop"></audio> -->
    <audio src="SleepAway.mp3" type = "audio/mp3" id="music"></audio>
    <button onclick="musicPlay()">재생</button>
    <button onclick="musicPause()">정지</button> <p></p>
    <div id="time"></div>
    <script>
        var musicObj = document.getElementById("music");

        function musicPlay() {
            musicObj.play();
        }

        function musicPause() {
            musicObj.pause();
        }

        //musicObj.addEventListener("timeUpdate", addEventListener = 콜백);
        musicObj.addEventListener("timeupdate",function() {
            var timeObj = document.getElementById("time");
            timeObj.innerHTML = Math.floor(musicObj.currentTime) + "/" + Math.floor(music.duration) + "초";
        }, false);
        
    </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Video</title>
</head>
<body>
    <video src="mylivewallpapers-com-Toshiro-Hitsugaya-Bleach.mp4" controls = "controls" loop = "loop" type = "video/mp4"></video>
</body>
</html>

mylivewallpapers-com-Toshiro-Hitsugaya-Bleach.mp4
10.05MB

함수로 migration

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Video</title>
</head>
<body>
    <!-- <video src="mylivewallpapers-com-Toshiro-Hitsugaya-Bleach.mp4" controls = "controls" loop = "loop" type = "video/mp4"></video> -->
    <video src="mylivewallpapers-com-Toshiro-Hitsugaya-Bleach.mp4" type = "video/mp4" id="vod"></video>
    <button onclick="vodPlay()">재성버튼</button>
    <button onclick="vodPause()">정지버튼</button><p>

    <!--type="range": 슬라이드바 생성-->
    볼륨: <input type="range" id="volumeControl" max = "1" step = "any" onchange="updateVolumne" >
    <script>
        var vodObj = document.getElementById("vod");

        function vodPlay() {

            vodObj.play();
        }
        function vodPause() {
            
            vod.pause();
        }

        //소리조절함수
        function updateVolumne() {
            
            var volumeObj = document.getElementById("volumeControl");
            vod.volume = volumeObj.value;
        }
    </script>
</body>
</html>

볼륨 bar로 소리 조절 가능