12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455 |
- <!DOCTYPE html>
- <html>
- <head>
- <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;
- }
- </style>
- <body>
- <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>
- <input class="item" id="file" type="file" accept=".mp3"/>
- <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")
- document.getElementById('form').addEventListener('submit', function (evt) {
- evt.stopPropagation();
- evt.preventDefault();
- setPlaySpeed(document.getElementById("inp").value)
- }, false)
- 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)
- function getPlaySpeed() {
- alert(vid.playbackRate);
- }
- function setPlaySpeed(num) {
- document.getElementById("num").innerText = '当前倍速: ' + num
- vid.playbackRate = num;
- }
- </script>
- </body>
- </html>
|