웹마스터 팁

SOUND 다루기 - 1

2008.10.01 09:46

ITBANK.kr

음악 파일 연주하기

음악파일을 연주하는 태그는 EMBED, BGSOUND, OBJECT 등의 태그를 사용할 수 있지만, 네츠케이프와 익스플로러 양대 브라우저에서 동시에 사용하게 하려면 EMBED 태그를 사용하는 것이 일반적입니다

EMBED 태그를 사용해 음악파일을 연주하는 방법은 아래와 같습니다

<EMBED SRC="음악파일" LOOP = "TRUE/FALSE" AUTOSTART = "TRUE/FALSE" HIDDEN = "TRUE/FALSE" VOLUME="숫자" WIDTH="픽셀" HEIGHT="픽셀">

자, 하나하나 이 태그의 속성이 무엇을 말하는지 알아보도록 하겠습니다

SRC : 이미지 태그에서 <IMG SRC="그림파일"> 처럼 사용하듯이 이것 역시 음악파일이 있는 위치와 파일명을 말합니다
LOOP : 자동으로 반복연주를 하게 할지 여부를 지정합니다
AUTOSTART : 페이지 로딩과 동시에 자동으로 재생하게 할지 여부를 지정합니다
VOLUME : 소리의 크기를 설정 합니다
WIDTH : 페이지에 보여질 컨트롤 박스의 가로크기를 지정합니다
HEIGHT : 페이지에 보여질 컨트롤 박스의 세로크기를 지정합니다
HIDDEN : 컨트롤 박스를 보이지 않게 설정합니다

그럼, 위의 태그를 실제로 적용한 코드를 보도록 하죠

<EMBED SRC="http://www.jasko.co.kr/java_data/1.mid" LOOP = "TRUE" AUTOSTART = "TRUE" HIDDEN = "FALSE" VOLUME="5" WIDTH="300" HEIGHT="200">

소스실행

이제 위의 기본 원리를 이해하셨다면 배열을 사용한 랜덤 배경음악을 연주하는 자바스크립트를 코딩해 보도록 하겠습니다

랜덤으로 배경음악 연주하기

<script>
music=new Array();
music[0]="1.mid";
music[1]="2.mid";
music[2]="3.mid";
music[3]="4.mid"; 
var i=Math.floor(Math.random()*music.length);
document.write("
<embed src=" + music[i] + " width=300 height=200 autostart = true loop = false>");
</script>

스크립트 에서는 4개의 음악파일을 배열로 정의하고 Math.random() 메소드에 의해 반환되는 난수를 이용해 랜덤으로 배경음악을 들려주고 있습니다
Math.random() 은 0에서 1 사이의 난수를 발생시켜 주는데 여기에 음악파일의 갯수(music.length) 즉, 4를 곱해주고 Math.floor 메서드를 실행하면 0 에서 3 사이의 정수를 반환받게 됩니다
이 정수가 로딩시의 배열번호(i) 가 되는 것이죠

어려우세요? Math 객체를 한번 더 공부 해 보시기 바랍니다

소스실행

예제적용사이트 : http://www.itbank.kr

제목 글쓴이 날짜
[펌] HTML5와 CSS3를 사용하여 최신 웹 사이트 구축하기 [6] file 999 2011.01.11
"서버에 요청중..." 메세지 없애기 [3] SeoSeungHyun 2011.01.11
xe에 모바일 업로드 하기(api 이용, 파일첨부 업로드 해결) [4] 천민수 2011.01.12
Content위젯에서 분류명(카테고리)를 이미지로 표현하기 [1] nalireco 2011.01.12
텍스타일 블로그 메인페이지 만들기 [1] designm 2011.01.13
탈퇴회원 아이디 재사용 막는 법 [5] 한꼬마 2011.01.18
XE에서 레이아웃이나 기타의 페이지에 include 사용에 대한 오해??? [3] DuRi 2011.01.18
[ 도움요청 ] 게시판 리스트에서 작성한 사람만 작성한 리스트가 보이는 방법 ?? 잘살아서복수!! 2011.01.20
[왕초보팁] 2차 메뉴를 레이아웃 스킨에 넣을 때 [2] HolyJohn 2011.01.21
좋은 레이아웃 찿으시는 분들 선우님이 새로 또 하나의 좋은 레이아웃을 만드 셨네요... [2] 유샤인 2011.01.21
PHP 5.3.x DEPRECATED 에러 해결하기 [2] 난다날아 2011.01.21
'대표도메인'연결후 '로그인'이 안될때,,(먹통) moonlight994 2011.01.24
XE 게시판에 소셜댓글 라이브리 적용하기 [6] [1] file 미자503 2011.01.26
외부에서 단독으로 xe게시판에 글 올리기, blogapi 기능 사용하여, [6] file 김기철980 2011.01.27
PHP의 끝을 닫지 않아도 실행됩니다. [2] SMaker 2011.01.29
홈페이지 브라우저 크기 고정시키기 코아 코스튬 2011.01.30
메뉴에서 채팅방 띄우기 용도로 쓰는 스크립트 코아 코스튬 2011.01.30
랜덤 이미지 롤링위젯스킨에서 컬러셋이 적용되지 않는분은 필독! file xemall 2011.02.02
게시판 관리자 표시하기... [6] file 카르마 2011.02.05
"서버에 요청중입니다" 메세지(혹은 다른 메세지, DB접속실패 등) 바꾸기 Cloverworld 2011.02.08