Skip to content

Instantly share code, notes, and snippets.

@chikoski

chikoski/app.js

Created July 4, 2015 03:18
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save chikoski/5f182d5fca997522710a to your computer and use it in GitHub Desktop.
Save chikoski/5f182d5fca997522710a to your computer and use it in GitHub Desktop.
Download ZIP
クロスフェーダ
Raw
app.js
var playerA = document.querySelector("#player_a");
var playerB = document.querySelector("#player_b");
var fader = document.querySelector("#fader");
fader.addEventListener("change", changeVolumes);
fader.value = 50;
changeVolumes();
function changeVolumes(){
var position = Number(fader.value);
playerA.volume = Math.min(position / 50.0, 1.0);
playerB.volume = Math.min(Math.abs(position - 100) / 50.0, 1.0);
}
function play(){
playerA.play();
playerB.play();
}
function pause(){
playerA.pause();
playerB.pause();
}
var playButton = document.querySelector("#play");
var pauseButton = document.querySelector("#pause");
playButton.addEventListener("click", play);
pauseButton.addEventListener("click", pause);
Raw
index.html
<!doctype html>
<html>
<head>
<title>cross fadr</title>
<meta charset="utf-8">
</head>
<body>
<audio id="player_a" src="01.mp3" controls preload loop></audio>
<audio id="player_b" src="02.mp3" controls preload loop></audio>
<form>
<input type="range" min="0" max="100" step="1" id="fader">
<button type="button" id="play">play</button>
<button type="button" id="pause">pause</button>
</form>
<script src="app.js"></script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment