HTML로 버튼을 클릭하면 음악이 나오게 하려면..

toold의 이미지

버튼을 클릭하면 음악(약 1분짜리)이 나오게 하고 싶거든요...
물론 미디어 플레이어 같은거 뜨는게 아니고..
그냥 음악이 나오게...
검색해 보니까 백그라운드 음악 나오는거 밖에 없던데..
클릭하면 한번만 재생되게 할 수 있는 태그는 없을까요..?..

아래와 같은 스크립트를 만들었는데..
클릭하면 나오긴 나오는데..
음악이 다 나온 후에 다시 한번 클릭하면 브라우져가 하얗게 되어 버립니다..ㅠ.ㅡ..
왜 그럴까요...

	<script language="javascript">
	<!--
		function listen(){
			document.write("<bgsound src='./files/test2.asf' autostart=true hidden=true loop=0>");
		}
	-->
	</script>

<a href="" onmousedown="listen()">듣기</a>
다크슈테펜의 이미지

백그라운드 뮤직 말고 embed태그로 한번 적용해 보시지요...?

인생이란게 다 그런게 아니겠어요....? 뭘(?)
http://schutepen.egloos.com

toold의 이미지

darkschutepen wrote:
백그라운드 뮤직 말고 embed태그로 한번 적용해 보시지요...?

해봤는데.. embed 태그를 사용하면 버튼을 누르자마자 음악이 나오면서 화면이 하얗게 변해버립니다..물론 아무 작업도 할 수 없는 상태가 되어버리구요.. :cry:

whitekid의 이미지

안보이는 iframe을 만들고 버튼을 클릭하면 그 프레임으로 배경음악 플레하는 HTML 을 로드하면 될것 같은데요.. ^^;

What do you want to eat?

송지석의 이미지

제 홈페이지에서는 object 태그를 써서 play/stop되게 해놨는데요..
대신에 IE전용입니다. embed로 했었을 때는 Mozilla에서는 quicktime이 새창으로 떠버려서 궁여지책으로 그렇게 만들었네요. 처음에 페이지 열고 플레이 안되게 하려면 AutoStart의 value를 0으로 하면 될 겁니다.

<object classid="CLSID:22D6F312-B0F6-11D0-94AB-0080C74C7E95" type="application/x-oleobject" id="player" width="300" height="45" style="width:0;height:0;top:0;left:0">
<param name="filename" value="./music/lately.wma"><param name="AutoStart" value="1">
<param name="EnableContextMenu" value="false">
<param name="PlayCount" value="1">
</object>
<script language="javascript">
function play(){
	document.player.Play();
}
function stop(){
	document.player.Stop();
}
</script>

embed를 쓰고 싶다면 다음 코드가 도움이 될 것입니다. 이 경우에는 Mozilla에서도 플레이되는데 quicktime(윈도우용 버전에서 확인)이 새창으로 떠버리고, 빈칸이 있는 파일의 경우 플레이가 안되더군요.

#대신에 이 코드는 제가 사용한지 꽤 된(1년 넘은..)코드라, 잘 동작하는 지 기억이 잘 안납니다....
<embed id=sound1 src="music/song_name" autostart=true hidden=true loop=false type="'wma'">
<script language="javascript">
function play(){
    document.sound1.Play();
}
function stop(){
    document.sound1.Stop();
}
</script>
toold의 이미지

송지석 wrote:
제 홈페이지에서는 object 태그를 써서 play/stop되게 해놨는데요..
대신에 IE전용입니다. embed로 했었을 때는 Mozilla에서는 quicktime이 새창으로 떠버려서 궁여지책으로 그렇게 만들었네요. 처음에 페이지 열고 플레이 안되게 하려면 AutoStart의 value를 0으로 하면 될 겁니다.
<object classid="CLSID:22D6F312-B0F6-11D0-94AB-0080C74C7E95" type="application/x-oleobject" id="player" width="300" height="45" style="width:0;height:0;top:0;left:0">
<param name="filename" value="./music/lately.wma"><param name="AutoStart" value="1">
<param name="EnableContextMenu" value="false">
<param name="PlayCount" value="1">
</object>
<script language="javascript">
function play(){
	document.player.Play();
}
function stop(){
	document.player.Stop();
}
</script>

embed를 쓰고 싶다면 다음 코드가 도움이 될 것입니다. 이 경우에는 Mozilla에서도 플레이되는데 quicktime(윈도우용 버전에서 확인)이 새창으로 떠버리고, 빈칸이 있는 파일의 경우 플레이가 안되더군요.

#대신에 이 코드는 제가 사용한지 꽤 된(1년 넘은..)코드라, 잘 동작하는 지 기억이 잘 안납니다....
<embed id=sound1 src="music/song_name" autostart=true hidden=true loop=false type="'wma'">
<script language="javascript">
function play(){
    document.sound1.Play();
}
function stop(){
    document.sound1.Stop();
}
</script>

정말 감사합니다... :D

toold의 이미지

죄송한데 한가지 더 도움을 청해도 될까요..^^;
오브젝트를 이용한 방법 중에서..
음악을 여러개 이어서 들려주고 싶은데 이럴 땐 어떻게 해야할까요..
그리고 음악과 음악사이에 일정한 시간 간격을 두고 싶습니다..
이것을 초단위로 설정할 수 있는 방법이 있는지 알고 싶습니다..
그리고 볼륨 조절을 해보려고..
<param name="Volume" value="10">
이렇게 했는데 전혀 효과가 없네요..^^;;
즐거운 주말 보내세요.. :)

toold의 이미지

답변이 없어서 염치불구하고 다시 질문 드립니다.. :(
위의 송지석님께서 알려주신 오브젝트 방법에서
다른 것보다..
하나의 음악을 10번 반복한다고 할 때
한번 음악이 끝나고, 다시 음악이 반복되기 전에 term을 두려면 어떻게 해야하는지...
3초정도 시간간격을 두고 싶거든요..
부디 도움 부탁드려요...ㅠ.ㅡ...

괜찮으시다면 여러음악 들려주는 방법도...^^;;

송지석의 이미지

object는 저도 모르겠습니다.
대신에 embed의 경우는 싸이월드의 경우 asx리스트 파일을 플레이 하면 여러곡이 플레이되더군요. object 태그를 써도 될지는 안해봐서 모르겠습니다.
3초 간격을 두는 것은 글쎄요. 안되지 않을까요? 그냥 3초동안 아무 소리 안나는 음악파일을 리스트에 넣는 게 어떨까요?

댓글 달기

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
이것은 자동으로 스팸을 올리는 것을 막기 위해서 제공됩니다.