wolyshaw 4 سال پیش
والد
کامیت
e585261e6b
1فایلهای تغییر یافته به همراه151 افزوده شده و 33 حذف شده
  1. 151 33
      public/music-change-speed/index.html

+ 151 - 33
public/music-change-speed/index.html

@@ -6,51 +6,169 @@
     <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>