<!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