본문 바로가기
셈틀 Com/홈페이지

소리제어 자바스크립트

by 길목 2003. 5. 1.
<html>
<head>
<title>::::: music test :::::</title>
<script language="javascript">
<!--
var currID = null;
var mute = "off";
var pause = "off";
var stop = "off";
var cbp_min = "";
var cbp_max = "";
var replay = "off";
var curr1_x = "";
var music_name = "http://heenju.nafly.net/music/sars.wav";

function close_myplayer() {
        clearInterval(currID);
}

function open_myplayer() {
        currID = setInterval("myplayer_position()", 100);
        cbp_min = parseInt(document.all.curr1.style.pixelLeft);
        cbp_max = parseInt(document.all.curr1.style.pixelLeft) + parseInt(document.all.state_bar.width);
        curr1_x = document.all.curr1.style.pixelLeft;
        document.myplayer.filename = music_name;
}

function myplayer_position() {
        if (document.myplayer.PlayState ==2) {
                document.all.curr1.style.pixelLeft = CurrBarPo(document.all.myplayer.CurrentPosition);
        }
        if (document.all.myplayer.CurrentPosition == document.all.myplayer.Duration) {
                document.all.curr1.style.pixelLeft = cbp_min;
                document.all.myplayer.CurrentPosition = 0;
                stop_on();
                if (replay == "on") document.myplayer.play();
        }
}

function CurrBarPo(cbp) {
  var cbp_position = ((cbp_max - cbp_min) * cbp) / document.all.myplayer.Duration;
  cbp_position = parseInt(cbp_position) + cbp_min;
  return cbp_position;
}

function myplayer_mute() {
        if (document.myplayer.PlayState == 2) {
                if (mute == "on") mute_off();
                else if (mute == "off") mute_on();
        }
}

function myplayer_pause() {
        if (document.myplayer.PlayState == 2) {
                if (pause == "on") pause_off();
                else if (pause == "off") pause_on();
        }
}

function myplayer_stop() {
        if (stop == "on") stop_off();
        else if (stop == "off") stop_on();
        document.all.curr1.style.pixelLeft = cbp_min;
}

function myplay_replay() {
        if (replay == "on") replay = "off";
        else if (replay == "off") replay = "on";
}

function curr1_move() {
        var x = event.clientX;
        document.all.curr1.style.pixelLeft = x;
        var curr1_afterX = parseInt(x - curr1_x);
        var cp = "";
        cp = (document.all.myplayer.Duration * curr1_afterX) / document.all.state_bar.width;
        document.myplayer.CurrentPosition = cp;
}

//-----------        작동        --------------//

function pause_on() {
        document.myplayer.pause();
        document.all.button_pause.value = "재생";
        pause = "on";
}
function pause_off() {
        document.myplayer.play();
        document.all.button_pause.value = "멈춤";
        pause = "off";
}

function mute_on() {
        document.myplayer.Mute=true;
        document.all.button_mute.value = "음재생";
        mute = "on";
}
function mute_off() {
        document.myplayer.Mute=false;
        document.all.button_mute.value = "음소거";
        mute = "off";
}

function stop_on() {
        document.myplayer.stop();
        document.all.button_play.value = "시작";
        stop = "on";
}
function stop_off() {
        document.myplayer.play();
        document.all.button_play.value = "정지";
        stop = "off";
        pause_off();
        mute_off();
}
//-->
</script>
</head>
<body onload="open_myplayer();" onunload="close_myplayer();">
<center>
<p><br>
<object classid="clsid:22D6F312-B0F6-11D0-94AB-0080C74C7E95" id=myplayer style="width=300; height=71;">
<param name="filename" value="">
<param name="autostart" value="false">
<param name="displaymode" value="0">
<param name="showcontrols" value="-1">
<param name="showaudiocontrols" value="-1">
<param name="showdisplay" value="0">
<param name="showgotobar" value="0">
<param name="showpositioncontrols" value="-1">
<param name="showstatusbar" value="-1">
<param name="showcaptioning" value="0">
<param name="transparentatstart" value="0">
<param name="AllowChangeDisplaySize" value="true">
<param name="AudioStream" value="-1">
<param name="CurrentPosition" value="-1">
<param name="CurrentMarker" value="-1">
<param name="Mute" value="false">
<param name="Volume" value="0">
<param name="CurrentPosition" value="10">
</object>

<div id="curr1" style="position:absolute; left:271px; top:141px; z-index:1"><img src="image/player_stateicon.gif"
width="11" height="16" alt="현재위치"></div>
<div id="vol1" style="position:absolute; left:345px; top:250px; z-index:1"><img src="image/player_stateicon.gif"
width="11" height="16" alt="볼륨조절"></div>
<p>
<br>
<img src="image/player_statebar.gif" name="state_bar" width="299" height="16"
onmousedown="javascript:curr1_move();">
<p><br><br>
<input type="button" name="button_play" value="정지" onclick="javascript:myplayer_stop();">
    
<input type="button" name="button_pause" value="멈춤" onclick="javascript:myplayer_pause();">
    
<input type="checkbox" name="checkbox_replay" onclick="javascript:myplay_replay();">  반복
<p><br>
<img src="image/player_volumebar.gif" name="volume_bar" width="150" height="16">
<p>
<input type="button" name="button_mute" value="음소거" onclick="javascript:myplayer_mute();">
<p><br>
<input type="button" name="button_ing" value="진행크기" onclick="alert(document.myplayer.CurrentPosition);">
    
<input type="button" name="button_total" value="전체크기" onclick="alert(document.myplayer.Duration);">
    
<input type="button" name="button_status" value="현재상태" onclick="alert(document.myplayer.PlayState);">
    
<input type="button" name="button_volume" value="볼륨 상태" onclick="document.myplayer.Volume=-600;">
</center>
</body>
</html>

관련글

댓글

티스토리툴바