mirror of
https://github.com/seigler/dash-visualizer
synced 2025-07-27 01:36:10 +00:00
feat: pitch changes with transaction size
This commit is contained in:
parent
e7240ea6b4
commit
f760596740
1 changed files with 76 additions and 38 deletions
114
app.js
114
app.js
|
@ -2,23 +2,86 @@
|
||||||
|
|
||||||
//(function() {
|
//(function() {
|
||||||
var socket = io("https://blockchain.masternode.io/");
|
var socket = io("https://blockchain.masternode.io/");
|
||||||
|
// var socket = io("https://insight.bitpay.com/");
|
||||||
var transactionList = document.getElementById('transactionList');
|
var transactionList = document.getElementById('transactionList');
|
||||||
var muteButton = document.getElementById('muteToggle');
|
var muteButton = document.getElementById('muteToggle');
|
||||||
var muted = false;
|
var muted = false;
|
||||||
|
var audioContext;
|
||||||
|
var soundBuffers = {
|
||||||
|
'tx': null,
|
||||||
|
'block': null
|
||||||
|
};
|
||||||
|
window.addEventListener('load', init, false);
|
||||||
|
|
||||||
function playSound(url) {
|
function init() {
|
||||||
|
try {
|
||||||
|
window.AudioContext = window.AudioContext||window.webkitAudioContext;
|
||||||
|
audioContext = new AudioContext();
|
||||||
|
}
|
||||||
|
catch(e) {
|
||||||
|
console.error('Web Audio API is not supported in this browser');
|
||||||
|
document.getElementById('muteToggle').remove();
|
||||||
|
}
|
||||||
|
try {
|
||||||
|
loadSound('assets/bell.mp3', 'tx');
|
||||||
|
loadSound('assets/whoosh.mp3', 'block');
|
||||||
|
}
|
||||||
|
catch(e) {
|
||||||
|
console.error('Couldn\'t load sounds.');
|
||||||
|
}
|
||||||
|
|
||||||
|
if (localStorage) {
|
||||||
|
muted = localStorage.getItem('muted');
|
||||||
|
if (muted === null) {
|
||||||
|
muted = false;
|
||||||
|
localStorage.setItem('muted', muted);
|
||||||
|
} else {
|
||||||
|
muted = (muted == 'true'); // localStorage stores strings not objects?
|
||||||
|
}
|
||||||
|
muteButton.className = (muted === true ? 'is-muted' : '');
|
||||||
|
}
|
||||||
|
|
||||||
|
muteButton.onclick = toggleMute;
|
||||||
|
|
||||||
|
socket.on('connect', function() {
|
||||||
|
document.getElementById('connectionStatus').className = 'is-connected';
|
||||||
|
// Join the room.
|
||||||
|
socket.emit('subscribe', 'inv');
|
||||||
|
})
|
||||||
|
socket.on('tx', onTransaction);
|
||||||
|
socket.on('block', onBlock);
|
||||||
|
socket.on('disconnect', function() {
|
||||||
|
document.getElementById('connectionStatus').className = 'is-disconnected';
|
||||||
|
});
|
||||||
|
socket.on('reconnecting', function() {
|
||||||
|
document.getElementById('connectionStatus').className = 'is-connecting';
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function loadSound(url, bufferName) {
|
||||||
|
var request = new XMLHttpRequest();
|
||||||
|
request.open('GET', url, true);
|
||||||
|
request.responseType = 'arraybuffer';
|
||||||
|
|
||||||
|
// Decode asynchronously
|
||||||
|
request.onload = function() {
|
||||||
|
audioContext.decodeAudioData(request.response, function(buffer) {
|
||||||
|
soundBuffers[bufferName] = buffer;
|
||||||
|
});
|
||||||
|
console.log('Loaded ' + url + ' as "' + bufferName + '"');
|
||||||
|
}
|
||||||
|
request.send();
|
||||||
|
}
|
||||||
|
|
||||||
|
function playSound(bufferName, playbackRate) {
|
||||||
if (muted === true) {
|
if (muted === true) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
var audio = document.createElement('audio');
|
var source = audioContext.createBufferSource();
|
||||||
audio.style.display = "none";
|
source.buffer = soundBuffers[bufferName];
|
||||||
audio.src = url;
|
source.connect(audioContext.destination);
|
||||||
audio.autoplay = true;
|
source.playbackRate.value = playbackRate;
|
||||||
audio.loop = false;
|
source.start();
|
||||||
audio.onended = function(){
|
|
||||||
audio.remove() //Remove when played.
|
|
||||||
};
|
|
||||||
document.body.appendChild(audio);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
var toggleMute = function() {
|
var toggleMute = function() {
|
||||||
|
@ -31,7 +94,8 @@
|
||||||
|
|
||||||
var onTransaction = function(data) {
|
var onTransaction = function(data) {
|
||||||
console.log(data);
|
console.log(data);
|
||||||
playSound('assets/bell.mp3');
|
var playbackRate = Math.min(Math.max(0.25, 1 - Math.log(data.valueOut)/16), 2);
|
||||||
|
playSound('tx', playbackRate);
|
||||||
var tx = document.createElement('div');
|
var tx = document.createElement('div');
|
||||||
tx.className = 'tx';
|
tx.className = 'tx';
|
||||||
var txValue = document.createElement('a');
|
var txValue = document.createElement('a');
|
||||||
|
@ -60,7 +124,7 @@
|
||||||
|
|
||||||
var onBlock = function(data) {
|
var onBlock = function(data) {
|
||||||
console.log(data);
|
console.log(data);
|
||||||
playSound('assets/whoosh.mp3');
|
playSound('block', 1);
|
||||||
var newBlock = document.createElement('a');
|
var newBlock = document.createElement('a');
|
||||||
newBlock.className = 'blockDivider';
|
newBlock.className = 'blockDivider';
|
||||||
newBlock.href = 'https://blockchain.masternode.io/block/' + data;
|
newBlock.href = 'https://blockchain.masternode.io/block/' + data;
|
||||||
|
@ -70,30 +134,4 @@
|
||||||
transactionList.insertBefore(newBlock, transactionList.firstChild);
|
transactionList.insertBefore(newBlock, transactionList.firstChild);
|
||||||
};
|
};
|
||||||
|
|
||||||
if (localStorage) {
|
|
||||||
muted = localStorage.getItem('muted');
|
|
||||||
if (muted === null) {
|
|
||||||
muted = false;
|
|
||||||
localStorage.setItem('muted', muted);
|
|
||||||
} else {
|
|
||||||
muted = (muted == 'true'); // localStorage stores strings not objects?
|
|
||||||
}
|
|
||||||
muteButton.className = (muted === true ? 'is-muted' : '');
|
|
||||||
}
|
|
||||||
|
|
||||||
muteButton.onclick = toggleMute;
|
|
||||||
|
|
||||||
socket.on('connect', function() {
|
|
||||||
document.getElementById('connectionStatus').className = 'is-connected';
|
|
||||||
// Join the room.
|
|
||||||
socket.emit('subscribe', 'inv');
|
|
||||||
})
|
|
||||||
socket.on('tx', onTransaction);
|
|
||||||
socket.on('block', onBlock);
|
|
||||||
socket.on('disconnect', function() {
|
|
||||||
document.getElementById('connectionStatus').className = 'is-disconnected';
|
|
||||||
});
|
|
||||||
socket.on('reconnecting', function() {
|
|
||||||
document.getElementById('connectionStatus').className = 'is-connecting';
|
|
||||||
});
|
|
||||||
//})();
|
//})();
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue