|
|
@@ -1,54 +1,174 @@
|
|
|
<!DOCTYPE html>
|
|
|
<html>
|
|
|
<head>
|
|
|
+ <meta charset="utf-8">
|
|
|
+ <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
|
|
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=0,viewport-fit=cover">
|
|
|
</head>
|
|
|
<style>
|
|
|
- .item{
|
|
|
- padding: 10px;
|
|
|
- width: 100%;
|
|
|
- box-sizing: content-box;
|
|
|
- }
|
|
|
+ body {
|
|
|
+ --spacing: .75rem;
|
|
|
+ font-family: sans-serif;
|
|
|
+ line-height: 1.5;
|
|
|
+ text-align: center;
|
|
|
+ margin: .75rem;
|
|
|
+ padding-bottom: 2rem;
|
|
|
+ color: hsl(269,19%,30%);
|
|
|
+ background-color: hsla(32,100%,85%,.35);
|
|
|
+ background-image: url("data:image/svg+xml;charset=utf8,%3Csvg width='100%25' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.4'/%3E%3C/filter%3E%3C/defs%3E%3C!-- %3Cpath filter='url(%23a)' opacity='.3' d='M0 0h1200v256H0z'/%3E--%3E%3Crect filter='url(%23a)' opacity='.3' width='100%25' height='100%25'/%3E%3C/svg%3E");
|
|
|
+}
|
|
|
+@media (min-width: 48em) {
|
|
|
+ body {--spacing: 1rem;}
|
|
|
+}
|
|
|
+ body * {box-sizing: border-box;}
|
|
|
+ h1, h2, h3 {font-weight:100;}
|
|
|
+ h1 {margin: 1em 0 .5em;}
|
|
|
+ .group {
|
|
|
+ border: 1px solid #fff;
|
|
|
+ background-color: rgba(255,255,255,.25);
|
|
|
+ padding: .5rem 1rem;
|
|
|
+ margin: 1rem auto;
|
|
|
+ }
|
|
|
+
|
|
|
+ .url {
|
|
|
+ display: flex;
|
|
|
+ width: 100%;
|
|
|
+ margin: 1rem auto;
|
|
|
+ }
|
|
|
+ [class*="_label"] {
|
|
|
+ position: relative;
|
|
|
+ white-space: nowrap;
|
|
|
+ margin-right: .5em;
|
|
|
+ min-width: 4em;
|
|
|
+ }
|
|
|
+ [class*="_label"] > span {
|
|
|
+ display: block;
|
|
|
+ position: relative;
|
|
|
+ top: 50%;
|
|
|
+ transform: translatey(-50%);
|
|
|
+ }
|
|
|
+ [class*="_input"] {
|
|
|
+ display: inline-block;
|
|
|
+ line-height: 1;
|
|
|
+ width: 100%;
|
|
|
+ margin: 0;
|
|
|
+ padding: .25rem .5rem;
|
|
|
+ font: inherit;
|
|
|
+ border: 1px solid #fff;
|
|
|
+ background-color: rgba(255,255,255,.5);
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ .upload {
|
|
|
+ display: flex;
|
|
|
+ width: 100%;
|
|
|
+ margin: 1rem auto;
|
|
|
+ }
|
|
|
+
|
|
|
+ .player_audio {
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+ .player_display {
|
|
|
+ font-size: 1.25rem;
|
|
|
+ }
|
|
|
+ .tempo {
|
|
|
+ display: flex;
|
|
|
+ width: 100%;
|
|
|
+ margin: 1rem auto;
|
|
|
+ }
|
|
|
+ .tempo_display {
|
|
|
+ font-weight: 700;
|
|
|
+ min-width: 3em;
|
|
|
+ margin-left: .5em;
|
|
|
+ }
|
|
|
</style>
|
|
|
<body>
|
|
|
+ <main>
|
|
|
+ <div class=group>
|
|
|
+ <div class=upload>
|
|
|
+ <label class=upload_label for=upload_input><span>上传</span></label>
|
|
|
+ <input id=upload_input class=upload_input type=file accept="audio/*">
|
|
|
+ </div>
|
|
|
|
|
|
-<div class="item" id="num">当前倍速: 1</div>
|
|
|
-<form class="item" id="form">
|
|
|
- <input id="inp" step="0.01" type="number" placeholder="请输入倍速" value="1" />
|
|
|
- <button type="submit">设置</button><br>
|
|
|
-</form>
|
|
|
+ </div>
|
|
|
|
|
|
-<input class="item" id="file" type="file" accept=".mp3"/>
|
|
|
+ <div class=group>
|
|
|
|
|
|
-<audio class="item" id="myVideo" height="176" controls src="./SJE40W8.mp3">
|
|
|
- Your browser does not support HTML5 video.
|
|
|
-</audio>
|
|
|
+ <div class=player>
|
|
|
+ <h3 class=player_display>SJE40W8.mp3</h3>
|
|
|
+ <audio class=player_audio controls src="./SJE40W8.mp3">
|
|
|
+ <track id=player-chords kind=captions srclang=en>
|
|
|
+ </audio>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class=tempo>
|
|
|
+ <label class=tempo_label for=tempo_input>速度</label>
|
|
|
+ <input class=tempo_input id=tempo_input type=range value=1 min=0.25 max=2.5 step=0.01>
|
|
|
+ <span class=tempo_display></span>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </main>
|
|
|
|
|
|
<script>
|
|
|
-var vid = document.getElementById("myVideo")
|
|
|
|
|
|
-document.getElementById('form').addEventListener('submit', function (evt) {
|
|
|
- evt.stopPropagation();
|
|
|
- evt.preventDefault();
|
|
|
- setPlaySpeed(document.getElementById("inp").value)
|
|
|
-}, false)
|
|
|
+const player = document.querySelector('.player_audio');
|
|
|
+const playerDisplay = document.querySelector('.player_display');
|
|
|
|
|
|
-document.getElementById('file').addEventListener('change', function(evt) {
|
|
|
- var urlObject = window.URL || window.webkitURL || window
|
|
|
- if (evt.target.files.length) {
|
|
|
- var url = urlObject.createObjectURL(evt.target.files[0])
|
|
|
- vid.src = url
|
|
|
- }
|
|
|
-}, false)
|
|
|
+const changeTempo = function () {
|
|
|
+ player.playbackRate = tempoInput.value;
|
|
|
+ tempoDisplay.textContent = tempoInput.value;
|
|
|
+};
|
|
|
|
|
|
-function getPlaySpeed() {
|
|
|
- alert(vid.playbackRate);
|
|
|
+const changeSongURL = function (e) {
|
|
|
+ player.src = urlInput.value;
|
|
|
+ let filename = player.src.split('\\').pop().split('/').pop();
|
|
|
+ playerDisplay.textContent = filename;
|
|
|
}
|
|
|
|
|
|
-function setPlaySpeed(num) {
|
|
|
- document.getElementById("num").innerText = '当前倍速: ' + num
|
|
|
- vid.playbackRate = num;
|
|
|
-}
|
|
|
+const changeSongFile = function (e) {
|
|
|
+ const target = e.currentTarget;
|
|
|
+ const file = target.files[0];
|
|
|
+ let reader;
|
|
|
+
|
|
|
+ if (target.files && file) {
|
|
|
+ reader = new FileReader();
|
|
|
+ reader.onload = function (e) {
|
|
|
+ player.setAttribute('src', e.target.result);
|
|
|
+ playerDisplay.textContent = file.name;
|
|
|
+ // player.play(); // auto play on load
|
|
|
+ }
|
|
|
+ reader.readAsDataURL(file);
|
|
|
+ }
|
|
|
+};
|
|
|
+
|
|
|
+// Get the song from:
|
|
|
+// const urlInput = document.getElementById('url_input');
|
|
|
+// urlInput.addEventListener("change", changeSongURL, false);
|
|
|
+
|
|
|
+
|
|
|
+// Or upload an MP3:
|
|
|
+const uploadInput = document.getElementById('upload_input');
|
|
|
+uploadInput.addEventListener('change', changeSongFile, false);
|
|
|
+
|
|
|
+
|
|
|
+// Playback tempo
|
|
|
+const tempoInput = document.getElementById('tempo_input');
|
|
|
+tempoInput.addEventListener("change", changeTempo, false);
|
|
|
+const tempoDisplay = document.querySelector('.tempo_display');
|
|
|
+tempoDisplay.textContent = tempoInput.value;
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+// Chords from:
|
|
|
+// const vtt = document.getElementById('url_input').value.replace('.mp3', '.vtt');
|
|
|
+// const player_chords = document.getElementById('player-chords');
|
|
|
+
|
|
|
+// player_chords.src = vtt;
|
|
|
+// player.src = urlInput.value;
|
|
|
+// changeSongURL();
|
|
|
+changeTempo();
|
|
|
</script>
|
|
|
|
|
|
</body>
|
wolyshaw