-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
executable file
·63 lines (61 loc) · 2.62 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
63
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>CodePen - <Project 7> 互動錄音播放鋼琴</title>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css'><link rel="stylesheet" href="./style.css">
</head>
<body>
<!-- partial:index.partial.html -->
<div id="app">
<div class="audioplayer" v-for="s in sounddata">
<audio preload="auto" v-bind:data-num="s.number">
<source v-bind:src="s.url" type="audio/ogg"/>
</audio>
</div>
<div class="centerbox">
<h2>Vue.js paino Project 7</h2>
<div class="samplebox">
<h3>Click Sample</h3>
<div class="sample sample1">
<div class="pic pic1"></div>
</div>
<div class="sample sample2">
<div class="pic pic2"></div>
</div>
<div class="sample sample3">
<div class="pic pic3"></div>
</div>
</div>
<div class="keyboard">
<div class="pianokey" v-for="s in display_keys">
<div class="white" v-if="s.type=='white'" v-on:click="addnote(s.num)" v-bind:class="get_current_highlight(s.num,s.key)?'playing':''">
<div class="label">{{String.fromCharCode(s.key)}}</div>
</div>
<div class="black" v-if="s.type=='black'" v-on:click="addnote(s.num)" v-bind:class="get_current_highlight(s.num,s.key)?'playing':''">
<div class="label">{{String.fromCharCode(s.key)}}</div>
</div>
</div>
</div><br/>
<div class="controls">
<ul class="notes_list" v-if="notes.length>0">
<li v-for="(note,id) in notes" v-bind:class="now_note_id-1==id?'playing':''">
<div class="num">{{note.num}}</div>
<div class="time">{{note.time}}</div>
</li>
</ul>
<button v-on:click="playnext(0.3)">Playnext</button>
<button v-if="playing_time<=1" v-on:click="startplay()">Startplay<i class="fa-solid fa-play"></i></button>
<button v-if="playing_time>1" v-on:click="stopplay()">Stopplay<i class="fa-solid fa-pause"></i></button>
<button v-if="record_time<=0" v-on:click="start_record()">Startrecord<i class="fa-solid fa-circle"></i></button>
<button v-if="record_time>=1" v-on:click="stop_record()">Stoprecord<i class="fa-solid fa-stop"></i></button>
<button v-on:click="notes=[]">Clear</button>
<h4>{{playing_time+record_time}}<i class="fa-solid fa-clock"></i></h4>
</div>
</div>
</div>
<!-- partial -->
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.js'></script><script src="./script.js"></script>
</body>
</html>