홈페이지에 배경 음악 넣기

송지석의 이미지

요새 저작권 문제로 이걸 쓰실 분이 있으실 줄 모르겠는데,
궁금해하실 분들이 찾기 쉽게 여기 올려봅니다.

계정을 가지고 운영하는 홈페이지에 배경음악을 넣고, 플레이/정지가 되게 하고 싶은 분들이 있을 겁니다.
여기서는 embed또는 object 태그로 배경음악을 넣고, 자바 스크립트로 플레이/정지가 되게 하는 방법을 설명하겠습니다.
저는 C를 주로 사용하는 임베디드 프로그래머라서 HTML 태그엔 익숙치 않으므로 저보다 더 실력 있으신 분들이 이 글에 더 좋은 방법으로 답글을 달아주시면 감사하겠습니다.

embed 태그 : (아마도) embed 태그는 모질라와 IE 둘 다에서 작동할 겁니다.
대신에 둘 다에서 동일하게 동작하지 않습니다.(여기서 설명한 방법은 IE에서 잘 동작합니다.)
그리고 id를 줄 때에 document.all.id로 해야만 IE에서 접근됩니다. object 태그에선 document.id로 해도 되고 document.all.id로 해도 둘다 작동합니다.
그리고 작년에 모질라에서 테스트 했을 때는 음악 파일명에 빈칸이 있으면 작동하지 않았습니다.
object 태그의 장점 : 좀더 파라미터를 다양하게 넣을 수 있는 것 같습니다. (저도 모든 파라미터를 써보진 않아서이렇게 무책임한 얘기밖에 못함을 이해해주세요)
IE 전용일 겁니다.

1. embed 태그 쓰기
<embed id=player src="music/mymusic.wma" autostart=true hidden=true loop=false type="audio/wma">
위와 같은 코드를 페이지 body에 넣으면 mymusic.wma라는 음악 파일이 페이지 로드시 플레이됩니다.
이제 플레이/정지 버튼을 만들어보겠습니다.

<script language="javascript">
function play(){
	document.all.player.Play();
}
function stop(){
	document.all.player.Stop();
}
</script>
<a style="color:black" href="javascript:play();" title="Play"> ></a>
<a style="color:black" href="javascript:stop();" title="Stop"> ■</a>

역시 body 안에 있으면 됩니다.
스크립트에서 document.all.player의 all을 빼먹으면 IE에서 스크립트 에러납니다.
> 링크와 ■링크를 버튼으로 썼습니다.

2. object 태그 쓰기
다른 것들은 위의 embed와 다른 것이 없습니다.
다만 embed 태그를 다음과 같이 바꿔줍니다.

<object classid="CLSID:22D6F312-B0F6-11D0-94AB-0080C74C7E95" type="application/x-oleobject" id="player" style="width:0;height:0;top:0;left:0">
<param name="filename" value="music/mymusic.wma"><param name="AutoStart" value="1">
<param name="EnableContextMenu" value="false">
<param name="PlayCount" value="1">
</object>
embed와 달리 file 경로가 param 태그 안에 들어갑니다.
Forums: 
7339989b62a014c4ce6e31b3540bc7b5f06455024f22753f6235c935e8e5의 이미지

embed는 비표준 태그입니다. (HTML 4.01에 없음) object 태그는 모질라에서도 작동합니다.

또, document.all.{id} 대신에 document.getElementById({id})를 사용하면 IE 5.0 이상, 모질라 전 버전에서 사용 가능합니다.

크로스 브라우징 가이드 (http://www.mozilla.or.kr/docs/web-developer/standard/content3.html)를 참고하세요.

송지석의 이미지

음, 그렇다면 IE에서 object 태그에 clsid를 넣지 않고 application 타입만으로 실행할 어플이 선택가능한 겁니까?
만약에 clsid만을 가지고 한다면 이기종 플랫폼에서 방법이 없겠는걸요

7339989b62a014c4ce6e31b3540bc7b5f06455024f22753f6235c935e8e5의 이미지

송지석 wrote:
음, 그렇다면 IE에서 object 태그에 clsid를 넣지 않고 application 타입만으로 실행할 어플이 선택가능한 겁니까?
만약에 clsid만을 가지고 한다면 이기종 플랫폼에서 방법이 없겠는걸요

type으로 한다는 것 같습니다. :)

댓글 달기

Filtered HTML

  • 텍스트에 BBCode 태그를 사용할 수 있습니다. URL은 자동으로 링크 됩니다.
  • 사용할 수 있는 HTML 태그: <p><div><span><br><a><em><strong><del><ins><b><i><u><s><pre><code><cite><blockquote><ul><ol><li><dl><dt><dd><table><tr><td><th><thead><tbody><h1><h2><h3><h4><h5><h6><img><embed><object><param><hr>
  • 다음 태그를 이용하여 소스 코드 구문 강조를 할 수 있습니다: <code>, <blockcode>, <apache>, <applescript>, <autoconf>, <awk>, <bash>, <c>, <cpp>, <css>, <diff>, <drupal5>, <drupal6>, <gdb>, <html>, <html5>, <java>, <javascript>, <ldif>, <lua>, <make>, <mysql>, <perl>, <perl6>, <php>, <pgsql>, <proftpd>, <python>, <reg>, <spec>, <ruby>. 지원하는 태그 형식: <foo>, [foo].
  • web 주소와/이메일 주소를 클릭할 수 있는 링크로 자동으로 바꿉니다.

BBCode

  • 텍스트에 BBCode 태그를 사용할 수 있습니다. URL은 자동으로 링크 됩니다.
  • 다음 태그를 이용하여 소스 코드 구문 강조를 할 수 있습니다: <code>, <blockcode>, <apache>, <applescript>, <autoconf>, <awk>, <bash>, <c>, <cpp>, <css>, <diff>, <drupal5>, <drupal6>, <gdb>, <html>, <html5>, <java>, <javascript>, <ldif>, <lua>, <make>, <mysql>, <perl>, <perl6>, <php>, <pgsql>, <proftpd>, <python>, <reg>, <spec>, <ruby>. 지원하는 태그 형식: <foo>, [foo].
  • 사용할 수 있는 HTML 태그: <p><div><span><br><a><em><strong><del><ins><b><i><u><s><pre><code><cite><blockquote><ul><ol><li><dl><dt><dd><table><tr><td><th><thead><tbody><h1><h2><h3><h4><h5><h6><img><embed><object><param>
  • web 주소와/이메일 주소를 클릭할 수 있는 링크로 자동으로 바꿉니다.

Textile

  • 다음 태그를 이용하여 소스 코드 구문 강조를 할 수 있습니다: <code>, <blockcode>, <apache>, <applescript>, <autoconf>, <awk>, <bash>, <c>, <cpp>, <css>, <diff>, <drupal5>, <drupal6>, <gdb>, <html>, <html5>, <java>, <javascript>, <ldif>, <lua>, <make>, <mysql>, <perl>, <perl6>, <php>, <pgsql>, <proftpd>, <python>, <reg>, <spec>, <ruby>. 지원하는 태그 형식: <foo>, [foo].
  • You can use Textile markup to format text.
  • 사용할 수 있는 HTML 태그: <p><div><span><br><a><em><strong><del><ins><b><i><u><s><pre><code><cite><blockquote><ul><ol><li><dl><dt><dd><table><tr><td><th><thead><tbody><h1><h2><h3><h4><h5><h6><img><embed><object><param><hr>

Markdown

  • 다음 태그를 이용하여 소스 코드 구문 강조를 할 수 있습니다: <code>, <blockcode>, <apache>, <applescript>, <autoconf>, <awk>, <bash>, <c>, <cpp>, <css>, <diff>, <drupal5>, <drupal6>, <gdb>, <html>, <html5>, <java>, <javascript>, <ldif>, <lua>, <make>, <mysql>, <perl>, <perl6>, <php>, <pgsql>, <proftpd>, <python>, <reg>, <spec>, <ruby>. 지원하는 태그 형식: <foo>, [foo].
  • Quick Tips:
    • Two or more spaces at a line's end = Line break
    • Double returns = Paragraph
    • *Single asterisks* or _single underscores_ = Emphasis
    • **Double** or __double__ = Strong
    • This is [a link](http://the.link.example.com "The optional title text")
    For complete details on the Markdown syntax, see the Markdown documentation and Markdown Extra documentation for tables, footnotes, and more.
  • web 주소와/이메일 주소를 클릭할 수 있는 링크로 자동으로 바꿉니다.
  • 사용할 수 있는 HTML 태그: <p><div><span><br><a><em><strong><del><ins><b><i><u><s><pre><code><cite><blockquote><ul><ol><li><dl><dt><dd><table><tr><td><th><thead><tbody><h1><h2><h3><h4><h5><h6><img><embed><object><param><hr>

Plain text

  • HTML 태그를 사용할 수 없습니다.
  • web 주소와/이메일 주소를 클릭할 수 있는 링크로 자동으로 바꿉니다.
  • 줄과 단락은 자동으로 분리됩니다.
댓글 첨부 파일
이 댓글에 이미지나 파일을 업로드 합니다.
파일 크기는 8 MB보다 작아야 합니다.
허용할 파일 형식: txt pdf doc xls gif jpg jpeg mp3 png rar zip.
CAPTCHA
이것은 자동으로 스팸을 올리는 것을 막기 위해서 제공됩니다.