[jQuery + HTML + CSS] 오디오 플레이어 만들기 - 1.

회사에서 진행중인 프로젝트에 배경음 삽입기능이 추가되었다.

음원파일 업로드 또는 youtube url등록이 다 가능해야 하는기능.

audio 태그와 YouTube API를 같이 사용하기 위한 플레이어를 만들기로 한다.

 

1. HTML과 CSS로 오디오 플레이어 형태 만들기

2. 각각의 버튼을 만들어 파일 업로드 및 url등록이 가능하게 만들기

3. 음원 업로드시 audio태그를 생성

4. youtube url등록시 API이용하여 iframe생성

 

작업단계의 큰 틀만 보자면 저렇게 4단계이다.

그래서 만들어진 오디오 플레이어는 아래와 같다.

기본적으로 표기되는 배경음의 속성은

 - 재생상태

 - 제목

 - 재생시간

 - 볼륨

이며 새로 링크를 삽입하거나 음원을 업로드하면 플레이어를 아래처럼 초기화 시켰다가 플레이어를 로드한다.

아래는 오디오 플레이어의 HTML과 CSS 이다.

<!-- 오디오 플레이어 HTML -->

<div class="bgm-wrap">
	<div id="audio-player"></div>
	<div id="youtube-player"></div>
	<div class="audio-box" style="">
		<div class="audio-title-wrap">
			<span id="audio-title"> 제목</span>
		</div>
		<div class="audio-control-btn btn-play"><i class="fa fa-play"></i></div>
		<div class="play-time start">00:00 </div>
		<div class="play-progress-box">
			<div class="play-progress-bar"></div>
		</div>
		<div class="play-time end"> 00:00 </div>
		<div class="play-volume-box">
			<div class="audio-control-btn btn-volume"><i class="fa fa-volume-up"></i></div>
			<div class="play-volume-slider"></div>
		</div>
		<div class="text-play-click">※ 재생 버튼을 눌러야 배경음이 재생됩니다.</div>
	</div>
	<form method='post' id='bgm-upload' name='frmUpload' enctype='multipart/form-data' style="display: none">
		<input class="bgm-file-upload" type="file" id="input-file-bgm" name="bgmfile" accept="audio/mp3, audio/ogg, audio/wav, audio/oga">
	</form>

	<div class="popup-audio-player" style="display: none">
		<div class="audio-control-btn btn-play">
			<i class="fa fa-play" style=""></i>
		</div>
	</div>
</div>

 

/* 오디오 플레이어 CSS */

.bgm-wrap {position: absolute;z-index: 9998; top:145px; left:430px; height:100px}
.bgm-wrap iframe#youtube-player {display:none}
.bgm-wrap .audio-box {width: 337px;height: 55px;background: #efefef; padding:5px 15px;margin:15px;border-radius: 15px; color: gray;border: solid 0.5px #ddd}
.bgm-wrap .audio-box .text-play-click {margin-top: 10px;}
.bgm-wrap .audio-title-wrap {margin-bottom: 5px;margin-top: 3px;font-size: 13px;font-weight: 500;color: #999;}
.bgm-wrap .audio-box .audio-control-btn{display: inline-block;font-size: 14px}
.bgm-wrap .audio-box .audio-control-btn.btn-play {width:12px; margin-right: 5px;cursor:pointer;}
.bgm-wrap .audio-box .audio-control-btn.btn-pause {width:12px; margin-right: 5px;cursor:pointer;}
.bgm-wrap .play-time {display: inline-block; margin: 4px;}
.bgm-wrap .audio-box .play-progress-box{display: inline-block;font-size: 14px;background: #fff;width:120px;height: 4px;border: solid 0.5px #ddd;vertical-align: middle}
.bgm-wrap .audio-box .play-progress-bar{width:0;height: 100%;background: gray;}
.bgm-wrap .audio-box .play-volume-box{display: inline-block;margin-left: 15px;}
.bgm-wrap .audio-box .play-volume-slider{display:inline-block;width: 40px;height:4px;vertical-align: middle;margin-left: 5px;}
.bgm-wrap .audio-box .play-volume-slider .ui-slider-handle.ui-state-active{border: 1px solid #c5c5c5;background: gray;}
.bgm-wrap .audio-box .play-volume-slider .ui-slider-handle{width: 10px; height:10px; border-radius: 15px}
.bgm-wrap .block_tool{position: absolute;top:-50px; width: auto}
.bgm-wrap .block_tool div{margin-bottom: 0;}
.bgm-wrap .block_tool div .block_copy{margin-right: 10px; margin-left: 10px}
.bgm-wrap .block_tool div{display:inline-block;margin-bottom: 10px;width: 40px;height: 40px;text-align: center;border-radius: 50%;background: #F1F1F1 no-repeat center;box-shadow: 3px 3px 8px 0 rgba(0, 0, 0, 0.05);cursor: pointer;}

.bgm-wrap .block_tool .audio_url p{position: absolute;left: -15px;top: 48px;padding: 0 10px;height: 40px;border-radius: 8px;line-height: 40px;text-align: center;background: #656868;color: #FFF;}
.bgm-wrap .block_tool .audio_list p{position: absolute;left: 36px;top: 48px;padding: 0 10px;height: 40px;border-radius: 8px;line-height: 40px;text-align: center;background: #656868;color: #FFF;}
.bgm-wrap .block_tool .audio_remove p{position: absolute;left: 83px;top: 48px;padding: 0 10px;height: 40px;border-radius: 8px;line-height: 40px;text-align: center;background: #656868;color: #FFF;width: 70px;}
.bgm-wrap .block_tool div p:after{content: "";clear: both;display: block;position: absolute;top: -8px;width: 40px;height: 10px; left:0; background: url(../images/section/section-tool-bg.png) no-repeat right center;}

.bgm-wrap .block_tool div:hover{background-color: #EB479A}
.bgm-wrap .block_tool .audio_url{background-image: url(../images/block/list-icon.png) !important;}
.bgm-wrap .block_tool .audio_url:hover{background-image:url(../images/block/list-icon-over.png) !important;}
.bgm-wrap .block_tool .audio_list{background-image: url(../images/block/desktop-icon.png); margin-right: 10px;margin-left: 10px !important;}
.bgm-wrap .block_tool .audio_list:hover{background-image:url(../images/block/desktop-icon-over.png) !important;}
.bgm-wrap .block_tool .audio_remove{background-image: url(../images/block/remove.png) !important;}
.bgm-wrap .block_tool .audio_remove:hover{background-image:url(../images/block/remove-over.png) !important;}

 

크롬 정책에 의해 자동재생을 할 수 없어 재생버튼을 눌러야 재생되도록 하였다.

또한 여려개의 음원파일을 올려 재생목록을 만들 수 없고

유튜브의 재생목록을 재생하지 않으며

적용한 음악을 반복재생으로 설정 해놓았다.

유튜브 API 스크립트가 비교적 늦게 불러와지는 문제도 있어 유튜브 삽입시 바로재생이 어려웠다.

 

실제 사용자가 배경음을 등록하는 화면은 아래와 같다.

다음 포스팅 부터는 사용자 화면을 만들어 보도록 한다.