index.html 1.4 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=0,viewport-fit=cover">
  5. </head>
  6. <style>
  7. .item{
  8. padding: 10px;
  9. width: 100%;
  10. box-sizing: content-box;
  11. }
  12. </style>
  13. <body>
  14. <div class="item" id="num">当前倍速: 1</div>
  15. <form class="item" id="form">
  16. <input id="inp" step="0.01" type="number" placeholder="请输入倍速" value="1" />
  17. <button type="submit">设置</button><br>
  18. </form>
  19. <input class="item" id="file" type="file" accept=".mp3"/>
  20. <audio class="item" id="myVideo" height="176" controls src="./SJE40W8.mp3">
  21. Your browser does not support HTML5 video.
  22. </audio>
  23. <script>
  24. var vid = document.getElementById("myVideo")
  25. document.getElementById('form').addEventListener('submit', function (evt) {
  26. evt.stopPropagation();
  27. evt.preventDefault();
  28. setPlaySpeed(document.getElementById("inp").value)
  29. }, false)
  30. document.getElementById('file').addEventListener('change', function(evt) {
  31. var urlObject = window.URL || window.webkitURL || window
  32. if (evt.target.files.length) {
  33. var url = urlObject.createObjectURL(evt.target.files[0])
  34. vid.src = url
  35. }
  36. }, false)
  37. function getPlaySpeed() {
  38. alert(vid.playbackRate);
  39. }
  40. function setPlaySpeed(num) {
  41. document.getElementById("num").innerText = '当前倍速: ' + num
  42. vid.playbackRate = num;
  43. }
  44. </script>
  45. </body>
  46. </html>