LINUX-HTML TIPS


  (2011-08-10 09:49:12, Hit : 1845, Vote : 485
 js_audio_4e.GIF (1.9 KB), Download : 54
 javaScript 로 HTML5 Audio 흉내내기


하여튼 태그에 <bgsound, <object , <embed  또는 <audio 를 사용하지 않으려고만 하는 것이다.
오디오에 대한 자바스크립트는 여기처럼 쉬운 것부터 너무 어려운 것까지 끝이 없었다. (오디오 처리가 이렇게 고난이도 작업인 줄 몰랐다)

여기에 나오는 HTML5의 audio 오브젝트를 만들어 쓰는 것이 내 수준에서 생각해 낼 수 있는 것이다.

(물론 여러 노래 고르기 등의 '버전 업'은 의미가 없다. HTML TAG 쓰지 않는 것이 목적이니 좋게 만들려면 사실 그냥 태그를 쓰면 된다. 여기에 자바스크립트를 더하고)

<html>
<head>
<script type="text/javascript">
if (!window.HTMLAudioElement) {
alert("Audio Not Supported!");
}
var audio_obj=new Audio();
audio_obj.src="korea.mp3";
function play() {
var ii1=document.getElementById("i1");
if (audio_obj.paused) {
  ii1.value=" 멈 춤 ";
  audio_obj.play();
}
else {
  ii1.value="다시 시작";
  audio_obj.pause();
}
}
function restart() {
var ii1=document.getElementById("i1");
ii1.value=" 멈 춤 ";
audio_obj.currentTime = 0;
audio_obj.play();
}
</script>
</head>
<body>
한국축구 응원가
<br/>
<form>
<input id="i1" type="button" value=" 시 작 " onclick="play()" />
<input id="i2" type="button" value=" 처음부터 " onclick="restart()" />
</form>
</body>
</html>

연습하느라 아래처럼도 해보고
<html>
<head>
<script type="text/javascript">
if (!window.HTMLAudioElement) {
alert("Audio Not Supported!");
}
var audio_obj=new Audio();
audio_obj.src="korea.mp3";
function play(no) {
var ii1=document.getElementById("i1");
var ii2=document.getElementById("i2");
var ii3=document.getElementById("i3");
  ii1.style.background="white";
  ii2.style.background="white";
  ii3.style.background="white";
if(no==1) {
  audio_obj.play();
  ii1.style.background="blue";
}
else if(no==2) {
  audio_obj.pause();
  ii2.style.background="orange";
}
else {
  audio_obj.pause();
  ii3.style.background="red";
  audio_obj.currentTime = 0;  
}
}
</script>
</head>
<body>
한국축구 응원가
<br/>
<form">
<input id="i1" type="button" value=" 시 작 " onclick="play(1)" />
<input id="i2" type="button" value=" 멈 춤 " onclick="play(2)" />
<input id="i3" type="button" value=" 중 단 " onclick="play(3)" />
</form>
</body>
</html>




Line Break
JavaScript로 HTML IMG 흉내내기

Copyright 1999-2019 Zeroboard / skin by zero