<!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; } </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=group> <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> const player = document.querySelector('.player_audio'); const playerDisplay = document.querySelector('.player_display'); 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); } }; // 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> </html>