soundtouchjs
Version:
An ES2015 library for manipulating Web Audio Contexts
105 lines (101 loc) • 2.97 kB
HTML
<html>
<head>
<title>soundtouch.js demo</title>
<style type="text/css">
body {
background: grey;
line-height: 30px;
}
input, button {
display:block;
}
.progress,
#progressMeter {
width: 400px;
}
.progress #duration {
position: relative;
float: right;
}
</style>
</head>
<body>
<button id="play" disabled>Play</button>
<button id="stop">Pause</button>
<div class="progress">
<div>
<span id="currentTime">0:00</span><span id="duration"></span>
</div>
<progress id="progressMeter" value="0" max="100"></progress>
</div>
Rate: <input type="range" autofocus="true" min="0.1" max="4.0" name="tempoSlider" value="1.0" id="tempoSlider" step="0.01" list="temporange">
<datalist id="temporange">
<option value="0.1" label="0">
<option value="0.5">
<option value="1.0">
<option value="1.5">
<option value="2.0">
<option value="2.5">
<option value="3.0">
<option value="3.5">
<option value="4.0" label="4">
</datalist>
<div id="tempo"></div>
Pitch: <input type="range" autofocus="true" min="0.1" max="2.0" name="pitchSlider" value="1.0" id="pitchSlider" step="0.01" list="pitchrange">
<datalist id="pitchrange">
<option value="0.1" label="0">
<option value="0.5">
<option value="1.0">
<option value="1.5">
<option value="2.0" label="2">
</datalist>
<div id="pitch"></div>
Change Key: <input type="range" autofocus="true" min="-7.0" max="7.0" name="keySlider" value="0" id="keySlider" step="1" list="keyrange" />
<datalist id="keyrange">
<option value="-7">
<option value="-6">
<option value="-5">
<option value="-4">
<option value="-3">
<option value="-2">
<option value="-1">
<option value="0">
<option value="1">
<option value="2">
<option value="3">
<option value="4">
<option value="5">
<option value="6">
<option value="7">
</datalist>
<div id="key"></div>
Volume: <input type="range" autofocus="true" min="0.0" max="10.0" name="volumeSlider" value="1.0" id="volumeSlider" step="0.01" list="volumerange">
<datalist id="volumerange">
<option value="0.0" label="0">
<option value="0.5">
<option value="1.0">
<option value="1.5">
<option value="2.0" label="2">
<option value="2.5">
<option value="3.0">
<option value="3.5">
<option value="4.0" label="4">
<option value="4.5">
<option value="5.0">
<option value="5.5">
<option value="6.0" label="6">
<option value="6.5">
<option value="7.0">
<option value="7.5">
<option value="8.0" label="8">
<option value="8.5">
<option value="9.0">
<option value="9.5">
<option value="10.0" label="10">
</datalist>
<div id="volume"></div>
</body>
<!-- <script src="soundtouch.js"></script> -->
<script type="module" src="example.js"></script>
</html>