728x90
반응형
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./style.css">
<title>Document</title>
<script src="../js/jquery.min.js"></script>
</head>
<body>
<div id="wrap">
<div id="header">
<h3>piano1</h3>
</div>
<div id="body">
<img src="piano1.JPG">
</div>
<div id="conBar">
<div id="line">
</div>
<div id="circle">
</div>
<div id="timeBar">
<span id="zero">00:00</span>
<span id="duration">03:42</span>
</div>
</div>
<div id="button_box">
<button onClick="previousMusic()">│◀</button>
<button onClick="musicPlay()">▶</button>
<button onClick="musicPause()">││</button>
<button onClick="nextMusic()">▶│</button>
<button onClick="musicReset()">■</button>
</div>
</div>
</body>
<script>
//오디오 불러오기
var audio1 = new Audio();
var audio2 = new Audio();
var audio3 = new Audio();
audio1.src='../Audio/my_piano1.mp3'
audio2.src='../Audio/my_piano2.mp3'
audio3.src='../Audio/my_piano3.mp3'
var musicList = [
{name:"<h3>piano1</h3>" , music:audio1},
{name:"<h3>piano2</h3>" , music:audio2},
{name:"<h3>piano3</h3>" , music:audio3}
];
var i = 0;
var isPlaying = false;
var result = 0;
var result2 = 0;
var sec = 0;
var min = 0;
function previousMusic() { //이전곡
musicList[i].music.pause();
if(i>0) {
i--;
}
isPlaying = false;
clearInterval(result)
clearInterval(result2)
moveBack()
sec = 0;
min = 0;
musicPlay();
}
function musicPlay(){ //재생
if(isPlaying==false) {
musicList[i].music.play()
var endTime = "0" + Math.floor((musicList[i].music.duration/60)) + ":" + Math.round((musicList[i].music.duration%60))
document.getElementById("header").innerHTML = musicList[i].name;
document.getElementById("body").innerHTML = "<img src='piano"+(i+1)+".JPG'>"
document.getElementById("duration").innerHTML = endTime
isPlaying = true;
result = setInterval(move,1000)
result2 = setInterval(timeup,1000)
}
}
function musicPause() { //일시정지
musicList[i].music.pause()
clearInterval(result)
clearInterval(result2)
isPlaying = false;
console.log("일시정지")
}
function nextMusic() { //다음곡
musicList[i].music.pause();
if(i<2) {
i++;
}
isPlaying = false;
clearInterval(result)
clearInterval(result2)
moveBack()
sec = 0;
min = 0;
musicPlay();
}
function musicReset() { //초기화
musicList[i].music.pause()
musicList[i].music.currentTime=0;
moveBack()
clearInterval(result)
clearInterval(result2)
document.getElementById("zero").innerHTML = "00:00"
sec = 0
isPlaying = false
console.log("정지")
}
function move() {
var movePerSec = 300/musicList[i].music.duration
var movedbar = movePerSec
$("#circle").animate({left:"+="+movedbar+"px"},100)
};
function moveBack() {
$("#circle").animate({left:"48px"},100)
}
function timeup() {
sec++
if(sec == 60) {
min++
sec = 0
}
var sec2 = sec<10 ? "0" + sec : sec
document.getElementById("zero").innerHTML = "0" + min + ":" + sec2
}
</script>
</html>
- body
1. 제목(header) , 앨범사진(body) , 컨트롤바(conBar) , 버튼들(button_box) 로 구성
2. 1번곡으로 시작하기때문에 처음화면에는 실제 값들 입력(ex . piano1 , 00:00 , 03:42 등)
- script
1. musicList 배열에 오디오 정보들을 입력(이름,오디오파일)
2. i : 제목 , 앨범사진 , 컨트롤바 관리 (musicList 배열넘버 0~2 안에서만 증감소하게 if사용)
3. isPlaying : boolean값을 통해 재생 및 정지 관리
4. result : setInterval(move) 컨트롤바 동그라미 animate 관리
5. result 2 : setInterval(timeup) 음악재생에 따른 재생시간 animate 관리
6. sec , min : timeup()의 재생시간 관련 상수
7. endTime : 재생중인 곡의 분과 시간을 나타냄 , duration을 사용해 몫과 나머지로 표시 , Math 사용해 소수점관리
8. move() : circle을 (line/노래의 재생시간) 씩 움직이게함 ( setInterver로 1초에 한번씩 움직이게함)
9. moveBack() : 움직인 circle을 복귀시킴
10. timeup() : 현재 재생시간 표기 함수
728x90
반응형
'HTML+CSS(실습)' 카테고리의 다른 글
| 2023-04-12(수) 체크박스 실습(getElementsByClassName) (0) | 2023.04.12 |
|---|---|
| ★2023-04-12(수) 이미지 슬라이드 실습(setAttribute) (0) | 2023.04.12 |
| ★2023-04-04(화) 2차원 동적배열문제(학생수 및 과목입력) (0) | 2023.04.04 |
| 2023-04-04(화) 배열문제3(로또) (0) | 2023.04.04 |
| 2023-04-04(화) 배열문제2(구구단,피보나치,완전수) (0) | 2023.04.04 |