JSFiddle - React, Tailwind, and code Playground
HTML
<!--
<audio loop="loop" autoplay="autoplay">
<source src="https://dl.dropboxusercontent.com/u/586198/son.ogg" />
<source src="https://dl.dropboxusercontent.com/u/586198/son.ogg" />
</audio>
-->
<p>
<button id="toggle">...</button>
<span id="downloading">téléchargement en cours...</span>
</p>
<p>
Vitesse courrante : <span id="speed"></span>
</p>
<p>
<button id="pitch1">1</button>
<button id="pitch2">2</button>
<button id="pitch3">3</button>
<button id="pitch4">4</button>
<button id="pitch5">5</button>
</p>
JavaScript
/*
var audioElement = document.querySelector('audio');
var mediaSourceNode = context.createMediaElementSource(audioElement);
mediaSourceNode.connect(filter);
filter.connect(context.destination);
source.playbackRate.value = 2.0;
*/
var speed = document.getElementById('speed');
showSpeed = function (i) {
// speed.innerHTML = source.playbackRate.value;
speed.innerHTML = i;
}
var downloading = document.getElementById('downloading');
var toggle = document.getElementById('toggle');
if (typeof AudioContext == "function") {
var audioContext = new AudioContext();
} else if (typeof webkitAudioContext == "function") {
var audioContext = new webkitAudioContext();
}
var source = audioContext.createBufferSource();
source.connect(audioContext.destination);
var isPlaying = false;
var xhr = new XMLHttpRequest();
xhr.open("GET", "https://dl.dropboxusercontent.com/u/586198/Jean%20Jacques-Perrey%20-%20Chicken%20on%20the%20rocks%20%28Original%20Studio%20Version%29.mp3", true);
xhr.responseType = "arraybuffer";
xhr.onload = function() {
audioContext.decodeAudioData(xhr.response, function(buffer) {
source.buffer = buffer;
source.loop = true;
//source.noteOn(0);
downloading.innerHTML = "";
toggle.innerHTML = "<b> ll </b>"
isPlaying = true;
});
};
xhr.send();
showSpeed(1);
var pitch1 = document.getElementById('pitch1');
pitch1.addEventListener('click', function() {
source.playbackRate.value = 1.0;
showSpeed(1);
});
var pitch2 = document.getElementById('pitch2');
pitch2.addEventListener('click', function() {
source.playbackRate.value = 1.1;
showSpeed(2);
console.log("pitch2");
});
var pitch3 = document.getElementById('pitch3');
pitch3.addEventListener('click', function() {
source.playbackRate.value = 1.3;
showSpeed(3);
});
var pitch4 = document.getElementById('pitch4');
pitch4.addEventListener('click', function() {
source.playbackRate.value = 1.4;
showSpeed(4);
});
var pitch5 =...