내배캠 3일차 TIL (html의 audio태그)

오디오 태그, html5부터 이런저런 우회없이 오디오파일을 html에서 재생하게 해주는 태그다.

 

이런식으로 기본 제공되는 플레이어도 있다.

 

<audio autoplay loop controls>
    <source src="freemusicforhtml.mp3" type="audio/mpeg">
    <source src="freemusicforhtml.ogg" type="audio/mogg">
</audio>

이것으로 간단하게 완성, 자동재생, 반복을 autoplay, loop로,

컨트롤바는 controls로 자동 구현된다

하단의 소스 항목 둘은 mp3파일과 ogg파일로 mp3파일이 재생이 안되는 브라우저에서 하라고 해놨다.

틀린거 같은데 고치기어렵다, if문을 통해 고쳐야 할텐데 지금 해결하기 어렵다.

뒤의 타입들도 엄밀히 해당하는 형식이 아닐건데 안되어 찾아보니 저렇게 넣어야 나왔다.

크롬계열은 음원의 자동재생을 막는다 하는데 사이트를 공용서버에 올려보지않아 확인불가.

 

그런데 저 재생바를 팀원들이 고생해서 만든 페이지에 넣자니 양심도 찔리고 이쁘지도 않아서 아이콘으로 구현했다.

 

function play(){
    var audio = document.getElementById("audio");
}

 

이걸 스크립트에

 

<p>wanna chill?
    <input type="image" name="button" src="icons8-play-button-circled-30.png" onclick="audio.play();"
           value="PLAY"> <!--재생-->
    <input type="image" name="button" src="icons8-pause-button-30.png" onclick="audio.pause();"
           value="PAUSE"> <!--일시정지-->
    <audio id="audio" src="Sub Lite Woof.mp3" onloadstart="audio.volume=0.5" onloadstart="audio.autoplay"
           loop></audio>


    </audio>

이걸 바디에 넣었다.

 

버튼에 이미지를 넣고 구현하려고 했는데 생각대로 안되어서 인풋에 이미지를 넣고 온클릭을 사용

이미지는 html과 같은 폴더에 넣고 올렸다.

 

자동재생 코드는 이것저것을 넣어봤으나 해결이 안되었고, 대신 onloadstart로 볼륨을 반으로 줄이는 기능을 넣었다.