|
|
@@ -1,174 +1,54 @@
|
|
|
<!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>
|
|
|
- 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;
|
|
|
- }
|
|
|
+ .item{
|
|
|
+ padding: 10px;
|
|
|
+ width: 100%;
|
|
|
+ box-sizing: content-box;
|
|
|
+ }
|
|
|
</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>
|
|
|
+<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 class=group>
|
|
|
+<input class="item" id="file" type="file" accept=".mp3"/>
|
|
|
|
|
|
- <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>
|
|
|
+<audio class="item" id="myVideo" height="176" controls src="./SJE40W8.mp3">
|
|
|
+ Your browser does not support HTML5 video.
|
|
|
+</audio>
|
|
|
|
|
|
<script>
|
|
|
+var vid = document.getElementById("myVideo")
|
|
|
|
|
|
-const player = document.querySelector('.player_audio');
|
|
|
-const playerDisplay = document.querySelector('.player_display');
|
|
|
+document.getElementById('form').addEventListener('submit', function (evt) {
|
|
|
+ evt.stopPropagation();
|
|
|
+ evt.preventDefault();
|
|
|
+ setPlaySpeed(document.getElementById("inp").value)
|
|
|
+}, false)
|
|
|
|
|
|
-const changeTempo = function () {
|
|
|
- player.playbackRate = tempoInput.value;
|
|
|
- tempoDisplay.textContent = tempoInput.value;
|
|
|
-};
|
|
|
-
|
|
|
-const changeSongURL = function (e) {
|
|
|
- player.src = urlInput.value;
|
|
|
- let filename = player.src.split('\\').pop().split('/').pop();
|
|
|
- playerDisplay.textContent = filename;
|
|
|
-}
|
|
|
-
|
|
|
-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);
|
|
|
+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
|
|
|
}
|
|
|
-};
|
|
|
-
|
|
|
-// Get the song from:
|
|
|
-// const urlInput = document.getElementById('url_input');
|
|
|
-// urlInput.addEventListener("change", changeSongURL, false);
|
|
|
+}, false)
|
|
|
|
|
|
+function getPlaySpeed() {
|
|
|
+ alert(vid.playbackRate);
|
|
|
+}
|
|
|
|
|
|
-// 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();
|
|
|
+function setPlaySpeed(num) {
|
|
|
+ document.getElementById("num").innerText = '当前倍速: ' + num
|
|
|
+ vid.playbackRate = num;
|
|
|
+}
|
|
|
</script>
|
|
|
|
|
|
</body>
|
