Commit 334dc265 authored by Tomáš Hübelbauer's avatar Tomáš Hübelbauer

Implement flexible layout and stop button

parent fe086789
html {
display: flex;
height: 100%;
}
body {
display: flex;
flex: 1;
flex-direction: column;
}
#head {
display: flex;
}
#timeInput {
flex: 1;
}
#body {
background: black;
flex: 1;
}
#renderCanvas {
width: 100%;
height: 100%;
}
......@@ -5,13 +5,17 @@
<title>Music App</title>
<script src="ryoyakawai/smfplayer/smfParser.js"></script>
<script src="index.js"></script>
<link href="index.css" rel="stylesheet" />
</head>
<body>
<input accept="audio/midi" id="fileInput" type="file" />
<h1 id="nameH1"></h1>
<input type="range" id="timeInput" value="0" style="width: 100%;" />
<button id="playPauseButton"></button>
<br />
<canvas id="renderCanvas" style="background: black; padding: 5px;"></canvas>
<div id="head">
<input accept="audio/midi" id="fileInput" type="file" />
<button id="playPauseButton"></button>
<button id="stopButton"></button>
<input type="range" id="timeInput" value="0" />
</div>
<div id="body">
<canvas id="renderCanvas"></canvas>
</div>
</body>
</html>
window.addEventListener('load', async _ => {
const fileInput = document.getElementById('fileInput');
const nameH1 = document.getElementById('nameH1');
const timeInput = document.getElementById('timeInput');
const playPauseButton = document.getElementById('playPauseButton');
const stopButton = document.getElementById('stopButton');
const timeInput = document.getElementById('timeInput');
const renderCanvas = document.getElementById('renderCanvas');
let channelNotes = [];
......@@ -10,8 +10,6 @@ window.addEventListener('load', async _ => {
fileInput.addEventListener('change', _ => {
const file = fileInput.files[0];
nameH1.textContent = file.name;
const fileReader = new FileReader();
fileReader.addEventListener('load', _ => {
......@@ -60,6 +58,12 @@ window.addEventListener('load', async _ => {
}
});
stopButton.addEventListener('click', _ => {
window.clearInterval(playbackInterval);
timeInput.value = '0';
render(renderCanvas, channelNotes, tempos, 0);
});
timeInput.addEventListener('input', _ => {
window.clearInterval(playbackInterval);
render(renderCanvas, channelNotes, tempos, timeInput.valueAsNumber);
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment