홈 음악 스트리밍 페이지 만들기
예전에 만들었던 음악 스트리밍 페이지 과정을 적어보려 한다.
과정에는 다음과 같은 준비가 필요하다.
1. tomcat 7.0( 버전은 상관없다)
> jsp를 읽어 홈 서버를 구축하기 위해 사용한다
2. eclipse EE
> jsp를 개발하기 위해 필요한 도구
3. jQuery Mobile
> 모바일 페이지를 간단하게 개발 가능
위 준비가 끝났다면 jsp와 html을 사용하여 간단한 홈 서버를 만든다.
내용은 간단하다.
html에서 제공하는 sound player를 활용하여 서버 pj folder 하위 mp3 파일들을 모두 읽어 리스트를 생성하고
각 리스트마다 해당하는 mp3를 재생한다.
jsp를 만드는 과정은 eclipse EE에서 dynamic web page project를 생성한다.
index.jsp 를 생성 아래는 그 내용이다.
보기 힘들어도 ctr c+v 아닌 다른 방법이 없다.
> jsp는 code 넣기가 불가능하다ㅜ
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.4/jquery.mobile-1.4.4.min.css">
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.4/jquery.mobile-1.4.4.min.js"></script>
<title>EMS v1.0</title>
</head>
<script type="text/javascript" charset='utf-8'>
/*
* add는 처음 JSP에서 얻은 link정보들을 JS로 옮기기 위해 사용되는 함수이다.
* 주 내용은 입력받은 type, value를 root(glovalValue)로 rematching해주는 기능이 있다.
*/
function add(type, value)
{
if(type == 0)
{
_root = root.getFolder(value);
}
else if(type == 1)
{
if(_root != null)_root.pushMusic(value);
}
else if(type == 2)
{
if(_root != null)_root.pushFolder(value);
}
}
/*
* JS에서 핵심이 되는 Class로 폴더 디렉토리의 폴더를 생각하면 된다.
* name, path, folder(Node Class), music의 정보를 가지고 있다.
*/
function Node(_name,_path)
{
this.name = _name;
this.path = _path+"/";
this.folder = new Array();
this.music = new Array();
return this;
}
Node.prototype.pushFolder = function(name)
{this.folder.push(new Node(name,this.path+name))};
Node.prototype.pushMusic = function(name)
{this.music.push(name)};
Node.prototype.getFolder = function(path)
{
//자기 자신 root부터 하위 디렉토리를 검색하여 현재 얻고자 하는 디렉토리를 찾아서 리턴해준다.
var index = 0;
var entry = new Array();
entry.push(this);//자기 자신을 넣는다.
//깊이 우선 탐색으로 디렉토리를 검사한다.
while(index < entry.length)
{
var temp = entry[index++];
if(path == temp.path) return temp;//찾은 경우
//현재 디렉토리의 하위 디렉토리를 추가한다.
for(var i=0;i<temp.folder.length;i++)
entry.push(temp.folder[i]);
}
return null;//못 찾는 경우 ( 이 경우 에러)
};
//기본이 되는 root로 처음에는 BaseRoot를 넣어야한다.
var root = new Node("music","music");
//검색할 떄 필요한 임시 변수
var _root = null;
</script>
<!-- this is JSP Source -->
<%@ page import="java.io.*, java.util.*" %>
<%
String root = "C:/Program Files/Apache Software Foundation/Tomcat 6.0/webapps/ms/";
//first get Root file
BufferedReader reader = new BufferedReader (new InputStreamReader (new FileInputStream(root+"/파일.txt"),"utf-8"));
//baseFile is first Music_file_root
String baseFile = reader.readLine();
reader.close();
//need queueType datatype
List<String> queue = new ArrayList<String>();
int index = 0 ;
//first input_data
queue.add(baseFile);
//search all of music_file
while(index < queue.size())
{
String __path = queue.get(index++);
String _path = root + __path;//count queue
String temp_path = __path.replace("\\", "/");
%>
<script type="text/javascript" charset='utf-8'>
add(0,'<%=temp_path%>/');
</script>
<%
File dir = new File(_path);//make file
String filenames[] = dir.list();//get list
for(int i=0; i<filenames.length;i++)
{
if(filenames[i].contains("."))
{//.~ type file is musicfile
if(filenames[i].contains(".mp3"))
{//only mp3 type music select
%>
<script type="text/javascript" charset='utf-8'>
add(1,'<%=filenames[i]%>');
</script>
<%
}//else type file(jpg, org, wav..) not impoted
}
else
{//non type file is folderfile
%>
<script type="text/javascript" charset='utf-8'>
add(2,'<%=filenames[i]%>');
</script>
<%
String t_path =__path+'\\'+filenames[i];
queue.add(t_path);
}
}
}
%>
<body>
<div data-role="page">
<div data-role="header">
<h1>Easy Music Streaming</h1>
</div>
<div data-role="main" class="ui-content">
<div class="ui-grid-solo">
<audio controls id ="audio">
</audio>
<h3 id = "name">Playing -</h3>
</div>
<ul id="list" data-role="listview">
</ul>
</div>
<div data-role="footer">
<div data-role="navbar">
<ul>
<li><a href="#anylink" onclick = "change_state()"><img id = "state_img" src = "1.png"></img></a></li>
<li><a href="#anylink" data-icon="plus">none</a></li>
<li><a href="#anylink" data-icon="minus">none</a></li>
<li><a href="#anylink" data-icon="delete">none</a></li>
</ul>
</div>
<h1>keicoon15@gmail.com</h1>
</div>
</div>
<!-- Javascript Source -->
<script type="text/javascript" charset='utf-8'>
/*
* 음악을 재생하기 위해 사용되는 함수이다.
* HTML5 Audio를 사용하여 노래를 재생한다.
*/
function playMusic(link, index) {//change *.jsp
var audioElement = document.getElementById('audio');
if(audioElement.autoplay != "true")
audioElement.autoplay = "true";
audioElement.innerHTML = "";
var source = document.createElement('source');
source.src = link; source.type = "audio/mpeg";
audioElement.appendChild(source);
audioElement.load();
audioElement.onended = function()
{
if(state == 1)//one
{
this.play();
}
else if(state == 2)//file
{
if(index < tempcurrent.music.length)
{
index++;
$("#name").text("Plaing - " + tempcurrent.music[index]);
playMusic(tempcurrent.path+tempcurrent.music[index], index);
}
}
else if(state == 3)//random
{
var rand_num = Math.random();
rand_num = Math.ceil(rand_num * tempcurrent.music.length)-1;
$("#name").text("Plaing - " + tempcurrent.music[rand_num]);
playMusic(tempcurrent.path+tempcurrent.music[rand_num], rand_num);
}
}
}
/*
* jquery 문법을 따른다.
* list를 생성한다.
*/
function makeList()
{
//list 초기화
$("#list").listview();
$("#list").empty();
var _li = document.createElement('li');
var _a = document.createElement("A");
var _image = document.createElement("img");
_image.src = "images3.png";
_a.innerText = "return";
_a.onclick = function(){
if(precurrent.length >= 1)
{
current = precurrent[precurrent.length-1];
precurrent.pop();
makeList();
}
};
_a.appendChild(_image);
_li.appendChild(_a);
$("#list").append(_li);
var folder = current.folder;
for(var i = 0; i < folder.length; i++)
{
var li = document.createElement('li');
var a = document.createElement("A");
var image = document.createElement("img");
image.src = "images2.png";
a.innerText = folder[i].name;
a.id = folder[i].path;
a.onclick = function(){
precurrent.push(current);
current = root.getFolder(this.id);
makeList();
};
a.appendChild(image);
li.appendChild(a);
$("#list").append(li);
}
var music = current.music;
for(var i = 0; i < music.length; i++)
{
var li = document.createElement('li');
var a = document.createElement("A");
var image = document.createElement("img");
image.src = "images.png";
a.innerText = music[i];
a.id = i;
a.onclick = function(){
$("#name").text("Plaing - " + this.innerText);
tempcurrent = current;
playMusic(current.path+current.music[this.id], this.id);
}
a.appendChild(image);
li.appendChild(a);
$("#list").append(li);
}
$("#list").listview( "refresh" );
}
function change_state()
{
state++;
if(state > 3)
state = 1;
var img = document.getElementById('state_img');
img.src = state + ".png";
}
//list에 필요한 폴더 path이다.
var current = root;
//list에 필요한 리스트 폴더 path이다.
var tempcurrent = root;
//prelist에 필요한 폴더 path이다.
var precurrent= new Array();
//재생 상태를 나타내는 변수
var state = 1;
//처음에 list 생성한다.
makeList();
</script>
</body>
</html>
작성 되었다면 web.xml을 통해 POST, GET의 utf-8 형식을 세팅한다.