-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
62 lines (61 loc) · 2.44 KB
/
index.html
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
<!DOCTYPE html>
<html>
<head>
<title>Music Jukebox</title>
<link rel="stylesheet" type="text/css" href="./css/bootstrap.min.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<script src="https://www.gstatic.com/firebasejs/4.8.1/firebase.js"></script>
<script>
// Initialize Firebase
var config = {
apiKey: "AIzaSyDMpoHEwuoxcC6rYD8A2uOYmNOiOCKNamM",
authDomain: "firstappendpoint.firebaseapp.com",
databaseURL: "https://firstappendpoint.firebaseio.com",
projectId: "firstappendpoint",
storageBucket: "firstappendpoint.appspot.com",
messagingSenderId: "458356373181"
};
firebase.initializeApp(config);
</script>
</head>
<body>
<div class="container" id='app'>
<br>
<div class="card text-white bg-info mb-3" style="max-width: 40rem;">
<div class="card-header">
<h1 class="panel">Music Jukebox</h1>
<div class="bg-dark text-white rounded"></div>
</div>
<div class="card-body">
<div class="form-group">
<label>Genre: </label>
<select class="form-control" v-model="selectedGenre">
<option v-for="genre in genres">{{genre}}</option>
</select>
</div>
<div class="form-group">
<label>Artist: </label>
<select class="form-control" v-model="selectedArtist">
<option v-for="artist in artists">{{artist}}</option>
</select>
</div>
<div class="form-group">
<label>Song: </label>
<select class="form-control" v-model="selectedSong" id="songs">
<option v-for="song in songs" :value="song.fileUrl">{{song.fileName}}</option>
</select>
</div>
<button title="play" @click="play" class="btn btn-success"><i class="material-icons">play_arrow</i></button>
<button title="pause" @click="pause" class="btn btn-warning"><i class="material-icons">pause</i></button>
<button title="stop" @click="stop" class="btn btn-danger"><i class="material-icons">stop</i></button>
<button title="previous" @click="previous" class="btn btn-primary"><i class="material-icons">fast_rewind</i></button>
<button title="next" @click="next" class="btn btn-primary"><i class="material-icons">fast_forward</i></button>
<button title="record" @click="record" class="btn btn-danger"><i class="material-icons">fiber_manual_record</i></button>
<audio id="music" :src="audioSrc" hidden autoplay loop></audio>
</div>
</div>
</div>
<script src="./js/vue.js"></script>
<script src="./js/app.js"></script>
</body>
</html>