전진

HTML5에서는 Audio파일을 컨트롤 할 수 있는 기본적인 테그를 가지고 있다.

<audio></audio>

이전에는 브라우저 마다 지원하는 파일형식이 다 달랐지만(책의 내용) 현재에는 모든 브라우저에서 거의 모든 파일의 형식을 지원하는 것 같다.

책에서는 브라우저 마다 지원하는 파일이 다르니 알아서 변화해 쓰세요라고 했지만..실제로 코드에 지원하지 않는다는 파일 형식을 넣고 실행 해보면 아주 잘 작동한다.

<audion controls sutoplay loop>

<source src="music.mp3" type="audio/mp3">

<source src="music.wav" type="audio/wav">

</audion>

위와 같은 코드는 브라우저 별 지원 파일이 다르기 때문에 오디오 파일의 리스트를 audio 태그 안에 나열하고 브라우저는 지원 가능한 파일을 재성하는 방식이다. 현재는 거의 모든 파일이 동작하는 것 같으니 이코드는 무시해도 될 듯 하다.

* Audio Tag attribute

duration - audio객체의 길이로 단위는 초.

currentTime - 재생중인 audio객체의 현재 위치로 단위는 초.

loop - true또는 false. 재생중인 audio객체의 재생이 끝나면 다시 재생할지를 결정.

autoplay - true또는 false. audio객체의 파일 로딩이 끝난 뒤 자동재생을 결정.

muted - true또는 false. audio객체의 음소거를 결정.

controls - true또는 false. audio객체를 컨트롤 할 수 있는 컨트롤을 출력.

volume - audio볼륨. 0~1사이의 값.

paused - true또는 false. audio객체의 현재 상태를 반환.

ended - true또는 false. audio객체의 재생이 끝나면 true반환.

currentSrc - audio객체를 위한 오디오 파일의 URL.

preload - 페이지가 로드 되기전 audio객체에서 불러올 오디오 파일을 미리 불러올지에 대한 설정.

여기까지는 기본적이 audio 태그의 사용법이었다.

각 브라우저마다 지원하는 오디오 파일의 형식이 다르다고 했는데, 지원 가능 여부에 대해서 알아보는 방법이 있다.

audioElement.canPlayType("audio/ogg");

canPlayType() 메소드에 파일 타입을 파라미터로 넣게 되면 그 타입을 지원하는지 하지 않는지에 대해서 리턴을 하게 된다.

리턴값은 probably나 maybe등을 리턴한다.

supportedAudioFormat(audioElement);

위 함수의 파라미터에 오디오객체를 넣어서 실행하게 되면 현재 지원 가능한 audio파일의 확장자를 리턴한다. 지원하는 파일이 없을 경우에는 빈공백문자열을 리턴하게 되니 파일을 불러오기전 실행하면 될듯한데..현재상황에서 브라우저들은 거의 모든 파일을 재생하도록 지원할 것 같다.

계속해서 스터디중..(업데이트 예정)

웹페이지가 사용자가 보는 장비(휴대폰, 피씨, 패블릿 등)에 맞춰 해상도가 변경이 되고 화면의 구성이 바뀌는것을 구현하고 싶다면 아래와 같은 구문을 상단에 추가해주면 된다.

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, target-densitydpi=medium-dpi" />

위의 구문이 추가되지 않는다면 모바일 화면에서도 PC화면이 계속해서 나오는것을 볼수 있을것이다.

이거 안넣고 화면이 제대로 나오지 않는다고 난리난리 개난리를 떨었던게 생각나.......ㅁ