MP3 구현
1. play 버튼을 누르면 리스트의 처음부터 곡을 재생하기 시작한다.
2. 한 곡이 끝나면 자동으로 다음 곡을 재생하고 마지막 곡이 끝나면 처음부터 다시 시작한다.
3. next 버튼을 클릭하면 현재 곡을 중단하고 다음 곡으로 넘어간다.
4. 리스트에서 마우스로 선택해도 곡을 연주할 수 있다.
built by HTML, CSS, Javascript
<!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">
<title>Document</title>
</head>
<body>
<h3>오디오 리스트 연속 재생</h3>
<hr>
처음 play버튼을 누르면 리스트에 있는 곡이 연속하여 자동재생됩니다.
마우스로 다른 곡을 선택하면 곡이 바뀝니다. next버튼을 누르면 다음 곡으로
넘어갑니다.
<hr>
<audio id = "audio" controls></audio><br>
<select id = "select" size = "3">
<option value = "EmbraceableYou.mp3" selected>EmbraceableYou</option>
<option value = "example1.mp3">Strange</option>
<option value = "EmbraceableYou.mp3">EmbraceableYou</option>
</select>
<input onclick = "playSong()" type = "button" value = "play">
<input onclick = "next()" type = "button" value = "next">
<div>현재 연주되는 곡명이 보입니다.</div>
<script>
let select = document.getElementById("select");
let audio = document.getElementById("audio");
let index = 0;
function playSong(){
audio.src = select.options[select.selectedIndex].value;
audio.play();
}
function next(){
if(select.selectedIndex == 2){
select.options[0].selected = "selected";
}
else{
select.options[select.selectedIndex + 1].selected = "selected";
}
audio.src = select.options[select.selectedIndex].value;
audio.play();
}
</script>
</body>
</html>'CS Study > Projects' 카테고리의 다른 글
| Project 12 : Youtube Clone Coding (0) | 2022.04.09 |
|---|---|
| Project 11 : 숨어 있는 강아지 찾기 게임 (0) | 2022.04.09 |
| Project 9 : 단어장 만들기 (0) | 2022.04.08 |
| Project 8 : 그림판 구현 (0) | 2022.04.08 |
| Project 7 : 상하좌우 키로 셀 이동하기 (0) | 2022.04.08 |