PHP html5 css3 음악 플레이어.

php로 음악파일 목록을 불러와 playlist 로 만들고 자동재생되도록 만들어보았습니다.

1차적으론 개인 파일서버에있는 음악들을 들으려고 만들었는데,

이정도면 배포해도 괜찮겠지 싶어서 일단은 배포합니다.

파일은 <name>.php 로 음악이 있는 폴더에 저장하면 됩니다. 파일을 직접 올리지는 않겠습니다.

php 에서 같은 디렉토리 내의 파일목록과 디렉토리목록을 리스트업해서 재생해줍니다.

우분투 환경에서 테스트하였고, 윈도우의 경우는 php가 한글을 인식하는게 문제가 있어서 안될듯..

재배포와 수정은 자유이지만 처음 주석부분은 수정하지 않았으면 좋겠다. <?php /** * * 상구너 http://blog.sanguneo.com * 구너플레이어 14.10 * 제이쿼리플러그인을 따로 두고싶으면 부분 수정해도 괜찮습니다. * **/ function endsWith($haystack, $needle) { return $needle === "" || substr($haystack, -strlen($needle)) === $needle; } function humanFileSize($size) { if ($size >= 1073741824) { $fileSize = round($size / 1024 / 1024 / 1024, 1) . 'GB'; } elseif ($size >= 1048576) { $fileSize = round($size / 1024 / 1024, 1) . 'MB'; } elseif ($size >= 1024) { $fileSize = round($size / 1024, 1) . 'KB'; } else { $fileSize = $size . ' bytes'; } return $fileSize; } function dirlist() { $default_dir = "."; if (!$dh = @opendir($default_dir)) { return false; } $dirlist[] = ".."; $filelist2 = array(); while (($file = readdir($dh)) !== false) { if ($file == "." ||$file == ".." || !is_dir($file)) continue; // . 과 .. 디렉토리는 무시 $filelist2[] = $file; } sort($filelist2); $dirlist = array_merge($dirlist,$filelist2); foreach ($dirlist as $dirname) { echo "<ul class=\"listentity\" data=\"" . $dirname . "\">\n<li class=\"mtitle2\">\n" . $dirname . "</li>\n\n</ul>\n"; } closedir($df); } function filelist() { $default_dir = "."; if (!$dh = @opendir($default_dir)) { return false; } while (($file = readdir($dh)) !== false) { if ($file == "." || $file == ".." || !endsWith($file, "mp3")) continue; // . 과 .. 디렉토리는 무시 $filelist[] = $file . "|" . humanFileSize(filesize($file)); } sort($filelist); $filefirst = explode("|",$filelist[1])[0]; foreach ($filelist as $filename) { echo "\t<ul class=\"listentity\" data=\"".explode("|",$filename)[0]."\">\n\t\t<li class=\"mtitle\">".explode("|",$filename)[0]."</li>\n\t\t<li class=\"mcurrent\">▶</li>\n\t\t<li class=\"msize\"><a href=\"".explode("|",$filename)[0]."\">".explode("|",$filename)[1]."</a></li>\n\t</ul>\n"; } $filefirst = explode("|",$filelist[0])[0]; closedir($df); } ?> <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, target-densitydpi=medium-dpi" /> <title>#music_title</title> <style> body { margin: 0; padding: 0; } .headC { position: relative; height: 100px; width: 100%; top: 0; left: 0 } #headI { position: fixed; background-color: white; border-bottom: gray 1px solid; z-index: 100; } .space { width: 100%; height: 10% } #headI #audio audio { width: 100%; height: 100%; } #musictitle { cursor: pointer; height: 30%; width: 100%; text-align: center; white-space: nowrap; text-overflow: ellipsis; -o-text-overflow: ellipsis; overflow: hidden; -moz-binding: url('ellipsis.xml#ellipsis'); } audio { width: 100%; } .tailC { position: relative; height: 50px; width: 100%; bottom: 0; left: 0 } #tailI { position: fixed; background-color: white; text-align: center; z-index: 100; } #tailI input { width: 15%; height: 100%; font-size: 20pt; -webkit-appearance: button; -webkit-border-radius: 0; } #dirlist { padding-top: 20px; } #dirlist .listentity:last-child { border-bottom: 0 } #playlist { padding-bottom: 20px; } .listentity { -webkit-margin-before: 0; -webkit-margin-after: 0; -webkit-padding-start: 10px; -webkit-padding-end: 10px; width: calc(100% - 20px); height: 30px; margin: 0 auto; border-top: 1px gray dashed; position: relative; clear: left; list-style: none; cursor: pointer } .listentity:hover { background-color: #CCCCCC } .listentity:last-child { border-bottom: 1px gray dashed; } .listentity li { line-height: 30px; vertical-align: middle; font-size: 10pt; float: left } .mtitle { width: 77%; white-space: nowrap; text-overflow: ellipsis; -o-text-overflow: ellipsis; overflow: hidden; -moz-binding: url('ellipsis.xml#ellipsis'); } .mtitle2 { width: 100%; white-space: nowrap; text-overflow: ellipsis; -o-text-overflow: ellipsis; overflow: hidden; -moz-binding: url('ellipsis.xml#ellipsis'); } .mcurrent { width: 5%; color: transparent } .msize { text-align: right; width: 8%; padding-left: 5%; } .active { font-weight: bold; } .active .mcurrent { color: black } a, a:hover, a:link, a:visited, a:active { color: gray; text-decoration: none; } </style> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> </head> <body> <div id="headI" class="headC"> <div class="space"></div> <div id="musictitle" title="클릭하시면 노래제목 전체가 출력됩니다">#music title</div> <audio id="audio" autoplay controls src="<?php echo $filefirst;?>"></audio> <div class="space"></div> </div> <div id="fakehead" class="headC"></div>  <div id="dirlist"> <?php echo dirlist();?> </div> <div id="playlist"> <?php echo filelist();?> </div>  <div id="tailI" class="tailC"> <input id="prev" type="button" value="<<" /> <input id="play" type="button" value="||"/> <input id="next" type="button" value=">>"/> <input id="loop" type="button" value="@"/> </div> <div id="faketail" class="tailC"></div> <script language="javascript" type="text/javascript"> var audio; var playlist; var tracks; var current; var loop = false; init(); function init() { current = 0; audio = $('#audio'); playlist = $('#playlist'); tracks = playlist.find('ul'); len = tracks.length - 1; audio[0].play(); playlist.find('ul').click(function(e) { link = $(this); current = link.index(); run(link, audio[0]); }); audio[0].addEventListener('ended', function(e) { if(!loop){ current++; if (current == len + 1) { current = 0; link = playlist.find('ul')[0]; } else { link = playlist.find('ul')[current]; } } run($(link), audio[0]); }); audio[0].addEventListener("pause", function() { $('#play').attr("value", ">"); }); audio[0].addEventListener("play", function() { $('#play').attr("value", "||"); }); } function run(link, player) { player.src = link.attr('data'); par = link; $('#musictitle').html(link.attr('data')); document.title = link.attr('data'); par.addClass('active').siblings().removeClass('active'); audio[0].load(); audio[0].play(); $('#play').attr("value", ">"); } $('#prev').click(function() { current--; if (current == -1) { current = len; } link = playlist.find('ul')[current]; run($(link), audio[0]); }); $('#play').click(function() { if (audio[0].paused == false) { audio[0].pause(); $('#play').attr("value", ">"); } else { audio[0].play(); $('#play').attr("value", "||"); } }); $('#next').click(function() { current++; if (current == len + 1) { current = 0; link = playlist.find('ul')[0]; } else { link = playlist.find('ul')[current]; } run($(link), audio[0]); }); $('#loop').click(function() { if(!loop){ loop = true; $('#loop').attr("value", "!@"); }else{ loop = false; $('#loop').attr("value", "@"); } }); $('#dirlist').find('ul').click(function(e) { location.href = $(this).attr("data"); }); $('#musictitle').click(function() { alert($('#musictitle').html()); }); $(document).ready(function() { var event = document.createEvent("HTMLEvents"); event.initEvent("click", true, false); playlist.find('ul')[0].dispatchEvent(event); var browserCheckText = new Array('iPhone', 'iPod', 'BlackBerry', 'Android', 'Windows CE', 'LG', 'MOT', 'SAMSUNG', 'SonyEricsson', 'Symbian', 'Windows Phone', 'webOS', 'Opera Mini', 'Opera Mobi', 'POLARIS', 'IEMobile', 'nokia'); for (var word in browserCheckText) { if (navigator.userAgent.toUpperCase().match(browserCheckText[word].toUpperCase()) != null) { $('#play').attr("value", ">"); audio[0].pause(); break; }else{ $('#play').attr("value", "||"); } } }); </script> </body> </html>

One file php html5 css3 jquery music player.

이름도 한번 지어볼까..? 구너플?

저작자표시 비영리 동일조건 (새창열림)

'Develop' 카테고리의 다른 글

구너갤러리 15.11.2 (0)	2015.11.16
구너갤러리 15.11 (0)	2015.11.04
구너 플레이어 15.11 (1)	2015.11.04
베지에 곡선 (Bezier Curve) (1)	2015.09.04
[구너 플레이어] 15.8 단일파일 php 음악 플레이어. (4)	2015.08.06

'Develop' 카테고리의 다른 글

티스토리툴바