gviaud icon

Speed Control Audio Player

gviaud | PRO | 07/10/17 04:38:37 AM UTC | 0 ⭐ | 284 👁️ | Never ⏰ | []
HTML 5 |

0 B

|

None

|

0 👍

/

0 👎

<!DOCTYPE HTML>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<input type="file">
<audio controls id="myAudio" autoplay></audio>
 
<script>
    var $audio = $('#myAudio');
    $('input').on('change', function(e) {
      var target = e.currentTarget;
      var file = target.files[0];
      var reader = new FileReader();
      
      console.log($audio[0]);
       if (target.files && file) {
            var reader = new FileReader();
            reader.onload = function (e) {
                $audio.attr('src', e.target.result);
                $audio.play();
            }
            reader.readAsDataURL(file);
        }
    });
    
    function buttonPressed(b)
    {
        $('button').css('background-color', '');
        $(b).css('background-color', 'yellow'); 
    }
</script>
 
<button onclick="document.querySelector('audio').currentTime -= 30;">Back 30s</button>
<button onclick="document.querySelector('audio').currentTime += 30;">Fwd 30s</button>
<br>
<button onclick="buttonPressed(this); document.querySelector('audio').playbackRate = 1.0;">1.0</button>
<button onclick="buttonPressed(this); document.querySelector('audio').playbackRate = 1.1;">1.1</button>
<button onclick="buttonPressed(this); document.querySelector('audio').playbackRate = 1.2;">1.2</button>
<button onclick="buttonPressed(this); document.querySelector('audio').playbackRate = 1.3;">1.3</button>
<button onclick="buttonPressed(this); document.querySelector('audio').playbackRate = 1.4;">1.4</button>
<button onclick="buttonPressed(this); document.querySelector('audio').playbackRate = 1.5;">1.5</button>
<button onclick="buttonPressed(this); document.querySelector('audio').playbackRate = 1.6;">1.6</button>
<button onclick="buttonPressed(this); document.querySelector('audio').playbackRate = 1.7;">1.7</button>
<button onclick="buttonPressed(this); document.querySelector('audio').playbackRate = 1.8;">1.8</button>
<button onclick="buttonPressed(this); document.querySelector('audio').playbackRate = 1.9;">1.9</button>
<button onclick="buttonPressed(this); document.querySelector('audio').playbackRate = 2.0;">2.0</button>
<button onclick="buttonPressed(this); document.querySelector('audio').playbackRate = 2.1;">2.1</button>
<button onclick="buttonPressed(this); document.querySelector('audio').playbackRate = 2.2;">2.2</button>
<button onclick="buttonPressed(this); document.querySelector('audio').playbackRate = 2.3;">2.</button>
<button onclick="buttonPressed(this); document.querySelector('audio').playbackRate = 2.4;">2.40</button>
<button onclick="buttonPressed(this); document.querySelector('audio').playbackRate = 2.5;">2.5</button>
</body>
</html>

Comments