언어/js

DropBox Music Streaming Script

조규현15 2016. 2. 12. 23:28
반응형

드롭박스에서 공유링크를 얻어와 음악을 스트리밍하는 스크립트를 작성해봤다.

html5의 audio element를 사용해 쉽게 재생을 구현했다.

# 가끔 드롭박스 링크가 재생성되기 때문에 다른 방법을 고민해 봐야한다.


스크립트 내용

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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
<!DOCTYPE html>
<html lang="ko">
 
<head>
  <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
  <title>음악 스트리밍 사이트</title>
</head>
 
<body onload="Loading()">
<audio id="audio" controls name="media">
  <source id="audio_source" type="audio/mpeg">
  Your browser does not support the audio element.
</audio>
</br></br>
<div id="music_list" style="border: 5px groove #48BAE4; height:auto; padding: 10px;">
</div>
 
<script>
var music_db =[
  [ "Danny Elfman - Hellboy Ⅱ Titles.mp3",
    "https://dl.dropboxusercontent.com/content_link/vpV5QGjmLGWz0uNmrVW2xIpgpv5TyDDm4FtM4vhTnjqqBGQDmi2rYlRacbfISOII/file"],
  [ "toby fox - UNDERTALE Soundtrack - 100 MEGALOVANIA.mp3",
    "https://dl.dropboxusercontent.com/content_link/R9wecdqfIuookyWbUiZ151EV4I1eyEluaGpHyvZ1LeVnmXDIquheXkNqeO0Bel6F/file"]
];
 
var music_list = document.getElementById('music_list');
var audio = document.getElementById('audio');
var audio_source = document.getElementById('audio_source');
var previous_tag = null;
 
function Loading()
{
  var hr = document.createElement("hr");
  /** 제목 설정 */
  var txt_title = document.createElement("h5");
  txt_title.innerHTML = "음악 : " + music_db.length + "곡";
  music_list.appendChild(txt_title);
  /** 음악 내용 설정 */
  var event_parameter_index=0;
  for(var i=0; i < music_db.length; i++)
  {
    music_list.appendChild(hr); // 선 삽입
    /** font element 추가 */
    var txt_music_content = document.createElement("font");
    txt_music_content.id = "music_" + i;
    txt_music_content.onclick = function () {
                Action(event_parameter_index++);
            };
    var txt_node = document.createTextNode(music_db[i][0]);
    txt_music_content.appendChild(txt_node);
    music_list.appendChild(txt_music_content);
  }
}
 
function Action(type)
{
  /** UI 변경 */
  if(previous_tag != null) previous_tag.style.color = "black";
  var music_name_tag = document.getElementById('music_'+type);
  music_name_tag.style.color = "red";
  previous_tag = music_name_tag;
  /** 음악 재생 */
  audio_source.src = music_db[type][1];
  audio.load();
  audio.play();
}
</script>
 
</html>
 
 
cs


반응형
저작자표시

'언어 > js' 카테고리의 다른 글

Module Pattern  (0) 2016.02.23
즉각 실행  (0) 2016.02.23
Unreal.js  (0) 2016.01.26
nodejs와 mongodb 실행방법  (0) 2015.01.30
for와 foreach 효율  (0) 2015.01.29

'언어/js'의 다른글

  • 현재글DropBox Music Streaming Script

관련글

댓글

티스토리툴바