| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 1 | 2 | 3 | ||||
| 4 | 5 | 6 | 7 | 8 | 9 | 10 |
| 11 | 12 | 13 | 14 | 15 | 16 | 17 |
| 18 | 19 | 20 | 21 | 22 | 23 | 24 |
| 25 | 26 | 27 | 28 | 29 | 30 | 31 |
- #happycgi
- #CSS
- #웹솔루션
- 해피CGI
- #jQuery
- 홈페이지제작
- #해피CGI
- 사이트제작
- happycgi
- php
- jquery
- 이미지
- 홈페이지
- 해피씨지아이
- #뉴스
- #이미지
- #cgimall
- #홈페이지제작
- #쇼핑몰
- CGIMALL
- #업종별
- #image
- #홈페이지
- CSS
- 솔루션
- javascript
- 게시판
- #솔루션
- #동영상
- 웹솔루션
- Today
- Total
웹솔루션개발 26년 노하우! 해피CGI의 모든것
[해피CGI][cgimall] 반응형이 지원되는 음악 미디어 플레이어 Responsive Audio Player 본문
[해피CGI][cgimall] 반응형이 지원되는 음악 미디어 플레이어 Responsive Audio Player
해피CGI윤실장 2026. 1. 26. 09:07
반응형이 지원되는 음악 미디어 플레이어입니다.
소스를 변경하여 다양하게 응용 가능합니다.
HTML 구조
<div class="container">
<div class="column add-bottom">
<div id="mainwrap">
<div id="nowPlay">
<span id="npAction">Paused...</span><span id="npTitle"></span>
</div>
<div id="audiowrap">
<div id="audio0">
<audio id="audio1" preload controls>Your browser does not support HTML5 Audio! 😢</audio>
</div>
<div id="tracks">
<a id="btnPrev">←</a><a id="btnNext">→</a>
</div>
</div>
<div id="plwrap">
<ul id="plList"></ul>
</div>
</div>
</div>
<div class="column add-bottom center">
Music by Mythium
</div>
</div>
CSS 소스
/* Font Family
================================================== */
@import url("https://fonts.googleapis.com/css2?family=Source+Sans+Pro&display=swap");
/* Global Styles
================================================== */
html,body {
-webkit-font-smoothing:antialiased;
-webkit-text-size-adjust:100%;
background-color:#0665a2;
color:#fff;
font-size:1rem;
font-family:"Source Sans Pro", arial, sans-serif;
font-weight:400;
letter-spacing:.025rem;
line-height:1.618;
padding:1rem 0;
}
*,::before,::after {
box-sizing:border-box;
}
* {
-webkit-tap-highlight-color:rgba(0, 0, 0, 0);
-webkit-tap-highlight-color:transparent;
}
/* Setup
================================================== */
.container { position:relative; margin:0 auto; max-width:800px; width:100%; }
.column { width:inherit; }
/* Typography / Links
================================================== */
p { color:#fff; display:block; font-size:.9rem; font-weight:400; margin:0 0 2px; }
a,a:visited { color:#8cc3e6; outline:0; text-decoration:underline; }
a:hover,a:focus { color:#bbdef5; }
p a,p a:visited { line-height:inherit; }
/* Misc.
================================================== */
.add-bottom { margin-bottom:2rem !important; }
.left { float:left; }
.right { float:right; }
.center { text-align:center; }
.hidden { display:none; }
.no-support {
margin:2rem auto;
text-align:center;
width:90%;
}
/* Audio Player Styles
================================================== */
audio {
display:none;
}
#audiowrap,
#plwrap {
margin:0 auto;
}
.
.
.
JS 소스
// Mythium Archive: https://archive.org/details/mythium/
jQuery(function ($) {
'use strict'
var supportsAudio = !!document.createElement('audio').canPlayType;
if (supportsAudio) {
// initialize plyr
var player = new Plyr('#audio1', {
controls: [
'restart',
'play',
'progress',
'current-time',
'duration',
'mute',
'volume',
'download'
]
});
// initialize playlist and controls
var index = 0,
playing = false,
mediaPath = 'https://archive.org/download/mythium/',
extension = '',
tracks = [{
"track": 1,
"name": "All This Is - Joe L.'s Studio",
"duration": "2:46",
"file": "JLS_ATI"
}, {
"track": 2,
"name": "The Forsaken - Broadwing Studio (Final Mix)",
"duration": "8:30",
"file": "BS_TF"
}, {
"track": 3,
"name": "All The King's Men - Broadwing Studio (Final Mix)",
"duration": "5:01",
"file": "BS_ATKM"
}, {
"track": 4,
"name": "The Forsaken - Broadwing Studio (First Mix)",
"duration": "8:31",
"file": "BSFM_TF"
}, {
"track": 5,
"name": "All The King's Men - Broadwing Studio (First Mix)",
"duration": "5:05",
"file": "BSFM_ATKM"
}, {
"track": 6,
"name": "All This Is - Alternate Cuts",
"duration": "2:48",
"file": "AC_ATI"
},
.
.
.
첨부파일을 다운로드하거나 해당 사이트로 이동하여 전체 소스를 확인하실 수 있습니다.
'웹프로그램밍 자료실 > 기타 자료' 카테고리의 다른 글
| [해피CGI][cgimall] CSS Grid Generator 그리드 레이아웃 코드 생성 (0) | 2026.01.15 |
|---|---|
| [해피CGI][cgimall] Electric Border (0) | 2025.12.22 |
| [해피CGI][cgimall] Interactive Blackhole (0) | 2025.12.19 |
| [해피CGI][cgimall] 로딩되기 전에 애니메이션 구현하기 Skeleton loading using only a few lines of CSS (0) | 2025.12.18 |
| [해피CGI][cgimall] 클릭하면 아이콘이 나오는 바 애니메이션 Chat Bar Interaction (0) | 2025.12.17 |

