HTML에 음악 재생바 넣기

개발/Html,Css

HTML에 음악 재생바 넣기

나태쿤 2021. 2. 17. 00:04

728x90

안녕하신가.

지난번에 이어 음악을 재생할수있는 태그를 소개하려한다

audio 태그인데 사용법은 매우쉽다

웹 화면을 캡쳐한거니 견빈의 등장에 놀라말길바랍니당

우선 하단에 3개의 음악바가있다 코드를 바로보자

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test</title>
</head>
<body>
    <img src="images/jindo.jpg" alt="외출중" width="300"/><br/>
    <img src="Nothing" alt="그림이 없습니다" width="300"/><br/>
    <img src="http://placehold.it/300x200"/><br/>
    <br/><br/><br/><br/>
    <audio src="sounds/1.mp3" controls="controls"></audio><br/>
    <audio src="sounds/2.mp3" controls="controls"></audio><br/>
    <audio src="sounds/3.mp3" controls="controls"></audio><br/>
</body>
</html>
Colored by Color Scripter

cs

12~14번에 src에 주목하자 sounds폴더 밑에있는 1~3 mp3파일을 사용한다는것이며

controls 속성은 자동재생이아닌 클릭하여 재생하는 방식이다

이 블로그에는 파일자체를 넣을수 없으니 직접하길바란다

728x90