cordQ text/html MNa<!doctype html><html><head></head><body><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>BSViewer SoyHashSound</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
color: #000;
margin: 0;
padding: 0;
min-height: 100vh;
overflow: auto;
background: #000;
display: flex;
justify-content: center;
align-items: center;
}
.wrapper {
position: relative;
width: 100%;
max-width: 90vh;
margin: 0 auto;
aspect-ratio: 1/1;
}
.background {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://ordfs.network/content/5a019218b29bd9bfac062105ea82c8106525386c3761406bdc7466391f3e6ce4_0');
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
#particle-canvas {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 1;
filter: blur(1px);
}
.container {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: flex-start;
z-index: 2;
padding-top: 15%;
}
.info-card {
background: transparent;
width: 25%;
aspect-ratio: 1/1;
padding: 20px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
transform: perspective(1000px) rotateX(5deg);
transform-origin: center;
}
.title {
font-size: min(2vw, 24px);
font-weight: bold;
text-align: center;
margin-bottom: 10px;
color: #333;
}
.info-grid {
display: grid;
gap: 0;
flex: 1;
grid-template-rows: repeat(2, min-content);
align-items: start;
width: 100%;
line-height: 0.8;
}
.info-item {
padding: 0;
background: transparent;
border: none;
text-align: center;
line-height: 0.8;
position: relative;
}
.info-label {
color: #000;
font-size: min(1.7vw, 20px);
margin: 0;
text-transform: uppercase;
font-weight: bold;
line-height: 1;
text-shadow: 0 0 1px rgba(255, 255, 255, 0.5);
}
.info-value {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
font-size: min(2.7vw, 32px);
font-weight: bold;
line-height: 1;
color: #00f7ff;
text-shadow: 0 0 10px rgba(0, 247, 255, 0.5),
0 0 20px rgba(0, 247, 255, 0.3),
0 0 30px rgba(0, 247, 255, 0.1);
margin: 0;
padding-left: 20%;
}
#status {
position: absolute;
top: -15px;
right: 15px;
font-size: min(1vw, 12px);
color: #fff;
}
.updating {
color: #00f7ff !important;
}
.sound-toggle {
position: absolute;
top: 20px;
right: 20px;
z-index: 3;
}
.sound-button {
background: transparent;
border: 1px solid rgba(0, 247, 255, 0.5);
width: 40px;
height: 40px;
border-radius: 50%;
cursor: pointer;
transition: all 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
opacity: 0.7;
padding: 0;
}
.sound-button:hover {
opacity: 1;
border-color: rgba(0, 247, 255, 0.8);
}
.sound-button .sound-icon::before {
content: "ð";
font-size: 18px;
}
.sound-button.muted .sound-icon::before {
content: "ð";
opacity: 0.4;
}
@media (orientation: landscape) and (max-height: 500px) {
.wrapper {
max-width: 90vh;
height: 90vh;
}
}
@media (orientation: portrait) {
.wrapper {
max-width: 90vw;
height: 90vw;
}
.info-card {
width: 35%;
}
}
</style>
</head>
<body>
<div class="wrapper">
<canvas id="particle-canvas"></canvas>
<div class="background"></div>
<div class="container">
<div class="info-card">
<div class="info-grid">
<div class="info-item">
<div class="info-label">Block Height</div>
<div id="blockHeight" class="info-value">Loading...</div>
<div id="status">Last updated: Never</div>
</div>
<div class="info-item">
<div class="info-label">Transactions</div>
<div id="txCount" class="info-value">Loading...</div>
</div>
</div>
</div>
<div class="sound-toggle">
<button id="soundToggle" class="sound-button muted" aria-label="Toggle sound">
<span class="sound-icon"></span>
</button>
</div>
</div>
</div>
<script>
class SoundSynthesizer {
constructor() {
this.audioContext = new (window.AudioContext || window.webkitAudioContext)();
this.isInitialized = false;
this.baseFreq = 261.63;
this.scale = [
this.baseFreq, // C
this.baseFreq * 9/8, // D
this.baseFreq * 5/4, // E
this.baseFreq * 3/2, // G
this.baseFreq * 5/3, // A
this.baseFreq * 2 // C
];
this.melodyPatterns = {
pattern1: [0, 2, 4, 2, 1, 2, 4, 2],
pattern2: [0, 1, 2, 4, 4, 2, 1, 0],
pattern3: [0, 2, 1, 3, 2, 4, 3, 5],
pattern4: [4, 2, 0, 2, 4, 2, 1, 2],
pattern5: [5, 3, 1, 0, 2, 4, 5, 3],
pattern6: [0, 5, 4, 2, 3, 1, 0, 4],
pattern7: [2, 4, 5, 3, 1, 0, 2, 5],
pattern8: [1, 3, 0, 4, 2, 5, 1, 3]
};
this.chordPresets = {
major: [1, 5/4, 3/2],
sus4: [1, 4/3, 3/2],
major7: [1, 5/4, 3/2, 15/8],
add9: [1, 5/4, 3/2, 9/4]
};
}
async initialize() {
if (this.isInitialized) return;
await this.audioContext.resume();
this.isInitialized = true;
await this.createReverb();
}
async createReverb() {
this.reverb = this.audioContext.createConvolver();
const length = 3;
const decay = 2.5;
const sampleRate = this.audioContext.sampleRate;
const impulse = this.audioContext.createBuffer(2, length * sampleRate, sampleRate);
for (let channel = 0; channel < 2; channel++) {
const impulseData = impulse.getChannelData(channel);
for (let i = 0; i < impulseData.length; i++) {
const t = i / sampleRate;
impulseData[i] = (Math.random() * 2 - 1) * Math.exp(-t * decay);
}
}
this.reverb.buffer = impulse;
}
generateMelodyFromHash(hash) {
const usableHash = hash.replace(/^0+/, '');
const notes = [];
const complexScale = [
this.baseFreq * 0.5,
this.baseFreq * 2/3,
this.baseFreq,
this.baseFreq * 5/4,
this.baseFreq * 4/3,
this.baseFreq * 3/2,
this.baseFreq * 7/4,
this.baseFreq * 2,
this.baseFreq * 2.25,
this.baseFreq * 1.5,
];
for (let i = 0; i < 8; i++) {
const hashPart1 = parseInt(usableHash.substr(i * 2, 2), 16);
const hashPart2 = parseInt(usableHash.substr(usableHash.length - i - 2, 2), 16);
const noteIndex = Math.floor(
(Math.sin(hashPart1) * Math.cos(hashPart2) + 1) *
complexScale.length / 2
) % complexScale.length;
notes.push(complexScale[noteIndex]);
}
return notes;
}
startBackgroundSound(hash) {
if (this.sequencerInterval) {
clearInterval(this.sequencerInterval);
}
const baseFreq = this.baseFreq / 2;
this.scale.forEach((freq, index) => {
const delay = index * 0.5;
setTimeout(() => {
this.createPadSound(freq / 2, 0.03 / (index + 1));
}, delay * 1000);
});
this.startMelodicSequence(hash);
}
createPadSound(frequency, volume) {
const osc = this.audioContext.createOscillator();
const gain = this.audioContext.createGain();
const filter = this.audioContext.createBiquadFilter();
const lfo = this.audioContext.createOscillator();
const lfoGain = this.audioContext.createGain();
lfo.type = 'sine';
lfo.frequency.setValueAtTime(0.2 + Math.random() * 0.3, this.audioContext.currentTime);
lfoGain.gain.setValueAtTime(frequency * 0.005, this.audioContext.currentTime);
osc.type = 'sine';
osc.frequency.setValueAtTime(frequency, this.audioContext.currentTime);
filter.type = 'lowpass';
filter.frequency.setValueAtTime(frequency * 2, this.audioContext.currentTime);
filter.Q.setValueAtTime(0.5, this.audioContext.currentTime);
lfo.connect(lfoGain);
lfoGain.connect(osc.frequency);
osc.connect(filter);
filter.connect(gain);
gain.connect(this.reverb);
this.reverb.connect(this.audioContext.destination);
gain.gain.setValueAtTime(0, this.audioContext.currentTime);
gain.gain.linearRampToValueAtTime(volume, this.audioContext.currentTime + 2);
osc.start();
lfo.start();
if (!this.activeOscillators) {
this.activeOscillators = [];
}
if (!this.activeGains) {
this.activeGains = [];
}
this.activeOscillators.push(osc);
this.activeGains.push(gain);
}
startMelodicSequence(hash) {
let patternIndex = 0;
let step = 0;
const calculateTempo = (hash) => {
const usableHash = hash.replace(/^0+/, '');
console.log('Original hash:', hash);
console.log('Usable hash after removing leading zeros:', usableHash);
const tempoSeed = parseInt(usableHash.slice(0, 4), 16);
const normalizedSeed = tempoSeed / 0xFFFF;
const tempoVariation = Math.sin(normalizedSeed * Math.PI) * 20;
const baseTempo = 120 + tempoVariation;
console.log('Calculated BPM:', baseTempo);
return Math.round(60000 / (baseTempo * 4));
};
const interval = calculateTempo(hash);
this.sequencerInterval = setInterval(() => {
const patterns = Object.values(this.melodyPatterns);
const currentPattern = patterns[patternIndex];
const noteIndex = currentPattern[step];
const note = this.scale[noteIndex];
this.playMelodicNote(note);
step = (step + 1) % currentPattern.length;
if (step === 0) {
patternIndex = Math.floor(Math.random() * patterns.length);
}
}, interval);
}
playMelodicNote(frequency) {
const oscillatorTypes = ['sine', 'triangle', 'sawtooth', 'square'];
const filterTypes = ['bandpass', 'lowpass', 'highpass'];
const oscType = oscillatorTypes[Math.floor(Math.random() * oscillatorTypes.length)];
const filterType = filterTypes[Math.floor(Math.random() * filterTypes.length)];
const osc = this.audioContext.createOscillator();
const gain = this.audioContext.createGain();
const filter = this.audioContext.createBiquadFilter();
osc.type = oscType;
osc.frequency.setValueAtTime(frequency, this.audioContext.currentTime);
filter.type = filterType;
filter.frequency.setValueAtTime(frequency, this.audioContext.currentTime);
filter.Q.setValueAtTime(Math.random() * 10, this.audioContext.currentTime);
const attackTime = 0.05 + Math.random() * 0.1;
const decayTime = 0.3 + Math.random() * 0.2;
gain.gain.setValueAtTime(0, this.audioContext.currentTime);
gain.gain.linearRampToValueAtTime(0.2, this.audioContext.currentTime + attackTime);
gain.gain.exponentialRampToValueAtTime(0.001, this.audioContext.currentTime + decayTime);
osc.connect(filter);
filter.connect(gain);
gain.connect(this.reverb);
osc.start();
osc.stop(this.audioContext.currentTime + decayTime);
}
playBlockUpdateSound(hash) {
this.initialize();
const melodyNotes = this.generateMelodyFromHash(hash);
if (this.sequencerInterval) {
clearInterval(this.sequencerInterval);
}
this.startBackgroundSound(hash);
melodyNotes.forEach((freq, index) => {
setTimeout(() => {
const oscs = [];
const gains = [];
const harmonics = [1, 1.2, 1.5, 2];
harmonics.forEach((harmonic, i) => {
const osc = this.audioContext.createOscillator();
const gain = this.audioContext.createGain();
osc.type = i === 0 ? 'sine' : 'triangle';
osc.frequency.setValueAtTime(freq * harmonic, this.audioContext.currentTime);
const volume = 0.000000000000000000001 / (i + 1);
gain.gain.setValueAtTime(0, this.audioContext.currentTime);
gain.gain.linearRampToValueAtTime(volume, this.audioContext.currentTime + 0.05);
gain.gain.exponentialRampToValueAtTime(0.001, this.audioContext.currentTime + 1.0);
const filter = this.audioContext.createBiquadFilter();
filter.type = 'lowpass';
filter.frequency.setValueAtTime(freq * 4, this.audioContext.currentTime);
filter.Q.setValueAtTime(0.5, this.audioContext.currentTime);
osc.connect(filter);
filter.connect(gain);
gain.connect(this.reverb);
oscs.push(osc);
gains.push(gain);
const startDelay = i * 0.02;
osc.start(this.audioContext.currentTime + startDelay);
osc.stop(this.audioContext.currentTime + 1.2);
});
this.reverb.connect(this.audioContext.destination);
}, index * 250);
});
const chordBase = melodyNotes[0];
const chordType = Object.values(this.chordPresets)[parseInt(hash.substr(-2), 16) % Object.keys(this.chordPresets).length];
chordType.forEach((ratio, index) => {
const osc = this.audioContext.createOscillator();
const gain = this.audioContext.createGain();
const filter = this.audioContext.createBiquadFilter();
osc.type = 'sine';
osc.frequency.setValueAtTime(chordBase * ratio, this.audioContext.currentTime);
filter.type = 'lowpass';
filter.frequency.setValueAtTime(chordBase * ratio * 2, this.audioContext.currentTime);
filter.Q.setValueAtTime(0.5, this.audioContext.currentTime);
gain.gain.setValueAtTime(0, this.audioContext.currentTime);
gain.gain.linearRampToValueAtTime(0.2 / (index + 1), this.audioContext.currentTime + 0.1);
gain.gain.exponentialRampToValueAtTime(0.001, this.audioContext.currentTime + 2);
osc.connect(filter);
filter.connect(gain);
gain.connect(this.reverb);
osc.start();
osc.stop(this.audioContext.currentTime + 2);
});
}
cleanupOldSounds() {
if (this.activeOscillators) {
this.activeOscillators.forEach((osc, index) => {
const gain = this.activeGains[index];
gain.gain.exponentialRampToValueAtTime(0.001, this.audioContext.currentTime + 0.1);
});
this.activeOscillators = [];
this.activeGains = [];
}
}
stop() {
if (this.sequencerInterval) {
clearInterval(this.sequencerInterval);
}
if (this.backgroundOscillators) {
this.backgroundOscillators.forEach(osc => osc.stop());
this.backgroundOscillators = [];
this.backgroundGains = [];
}
this.cleanupOldSounds();
if (this.audioContext) {
this.audioContext.suspend();
}
}
async resume() {
if (this.audioContext) {
await this.audioContext.resume();
}
}
}
class Particle {
constructor(canvas, hashConfig) {
this.canvas = canvas;
this.ctx = canvas.getContext('2d');
this.hashConfig = hashConfig;
this.reset();
}
reset() {
const { hash } = this.hashConfig;
this.x = Math.random() * this.canvas.width;
this.y = Math.random() * this.canvas.height;
this.size = Math.random() * 2 + 0.5;
this.baseSize = this.size;
this.speedX = (Math.random() - 0.5) * 1.5;
this.speedY = (Math.random() - 0.5) * 1.5;
this.sparkleSpeed = 0.05 + Math.random() * 0.05;
this.sparkleOffset = Math.random() * Math.PI * 2;
this.hue = 180 + Math.random() * 40;
this.saturation = 80 + Math.random() * 20;
this.brightness = 90 + Math.random() * 10;
this.alpha = Math.random() * 0.5 + 0.5;
this.baseAlpha = this.alpha;
}
update() {
this.x += this.speedX;
this.y += this.speedY;
const time = Date.now() * this.sparkleSpeed + this.sparkleOffset;
this.size = this.baseSize * (1 + Math.sin(time) * 0.5);
this.alpha = this.baseAlpha * (0.8 + Math.sin(time) * 0.2);
if (this.x < 0 || this.x > this.canvas.width) this.speedX *= -1;
if (this.y < 0 || this.y > this.canvas.height) this.speedY *= -1;
}
draw() {
this.ctx.beginPath();
this.ctx.globalAlpha = this.alpha;
const gradient = this.ctx.createRadialGradient(
this.x, this.y, 0,
this.x, this.y, this.size * 2
);
gradient.addColorStop(0, `hsla(${this.hue}, ${this.saturation}%, ${this.brightness}%, 1)`);
gradient.addColorStop(0.5, `hsla(${this.hue}, ${this.saturation}%, ${this.brightness}%, 0.3)`);
gradient.addColorStop(1, `hsla(${this.hue}, ${this.saturation}%, ${this.brightness}%, 0)`);
this.ctx.fillStyle = gradient;
this.ctx.arc(this.x, this.y, this.size * 2, 0, Math.PI * 2);
this.ctx.fill();
}
}
class ParticleSystem {
constructor(canvasId) {
this.canvas = document.getElementById(canvasId);
this.ctx = this.canvas.getContext('2d');
this.particles = [];
this.particleCount = 65;
this.hashConfig = { hash: '0000000000000000000000000000000000000000000000000000000000000000' };
this.resize = this.resize.bind(this);
this.animate = this.animate.bind(this);
this.updateHashConfig = this.updateHashConfig.bind(this);
this.init();
}
updateHashConfig(newHash) {
this.hashConfig.hash = newHash;
const resetCount = Math.floor(this.particles.length * 0.2);
for (let i = 0; i < resetCount; i++) {
const index = Math.floor(Math.random() * this.particles.length);
this.particles[index].reset();
}
}
init() {
window.addEventListener('resize', this.resize);
this.resize();
for (let i = 0; i < this.particleCount; i++) {
this.particles.push(new Particle(this.canvas, this.hashConfig));
}
this.animate();
}
resize() {
this.canvas.width = this.canvas.offsetWidth;
this.canvas.height = this.canvas.offsetHeight;
}
animate() {
this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
this.ctx.globalCompositeOperation = 'screen';
this.particles.forEach(particle => {
particle.update();
particle.draw();
});
requestAnimationFrame(this.animate);
}
}
let particleSystem;
let soundSynthesizer;
let lastKnownHeight = null;
let lastKnownBlockHash = null;
let isUpdating = false;
let isSoundInitialized = false;
let isSoundMuted = true;
document.addEventListener('DOMContentLoaded', () => {
particleSystem = new ParticleSystem('particle-canvas');
soundSynthesizer = new SoundSynthesizer();
const soundToggle = document.getElementById('soundToggle');
soundToggle.addEventListener('click', async () => {
isSoundMuted = !isSoundMuted;
soundToggle.classList.toggle('muted');
if (isSoundMuted) {
soundSynthesizer.stop();
} else {
await soundSynthesizer.resume();
if (isSoundInitialized) {
if (lastKnownHeight) {
fetchDetailedBlockData(lastKnownBlockHash);
}
} else {
initializeSound();
}
}
});
fetchBasicBlockData();
});
async function fetchBasicBlockData() {
if (isUpdating) return;
try {
isUpdating = true;
document.getElementById('status').classList.add('updating');
document.getElementById('status').textContent = 'Updating basic data...';
const heightResponse = await fetch('https://api.whatsonchain.com/v1/bsv/main/chain/info');
if (!heightResponse.ok) throw new Error('Failed to fetch chain info');
const chainInfo = await heightResponse.json();
const latestHeight = chainInfo.blocks;
if (lastKnownHeight === latestHeight) {
document.getElementById('status').textContent = '';
document.getElementById('status').classList.remove('updating');
isUpdating = false;
return;
}
const blockResponse = await fetch(`https://api.whatsonchain.com/v1/bsv/main/block/height/${latestHeight}`);
if (!blockResponse.ok) throw new Error('Failed to fetch block data');
const blockData = await blockResponse.json();
const elements = {
blockHeight: { element: document.getElementById('blockHeight'), value: latestHeight },
txCount: { element: document.getElementById('txCount'), value: blockData.txcount.toLocaleString() }
};
Object.values(elements).forEach(({ element, value }) => {
element.style.transition = 'opacity 0.3s ease-in-out';
element.style.opacity = '0';
setTimeout(() => {
element.textContent = value;
element.style.opacity = '1';
}, 300);
});
lastKnownHeight = latestHeight;
if (isSoundInitialized && !isSoundMuted) {
fetchDetailedBlockData(blockData.hash);
}
} catch (error) {
console.error('Error fetching basic block data:', error);
document.getElementById('status').textContent = '';
} finally {
document.getElementById('status').classList.remove('updating');
isUpdating = false;
}
}
async function initializeSound() {
try {
await soundSynthesizer.initialize();
isSoundInitialized = true;
const response = await fetch('https://api.whatsonchain.com/v1/bsv/main/chain/info');
const chainInfo = await response.json();
const blockResponse = await fetch(`https://api.whatsonchain.com/v1/bsv/main/block/height/${chainInfo.blocks}`);
const blockData = await blockResponse.json();
if (!isSoundMuted) {
fetchDetailedBlockData(blockData.hash);
}
} catch (error) {
console.error('Error initializing sound:', error);
}
}
async function fetchDetailedBlockData(blockHash) {
if (isSoundMuted) return;
try {
document.getElementById('status').textContent = 'Loading sound data...';
lastKnownBlockHash = blockHash;
const fullBlockResponse = await fetch(`https://api.whatsonchain.com/v1/bsv/main/block/hash/${blockHash}`);
if (!fullBlockResponse.ok) throw new Error('Failed to fetch full block data');
const fullBlockData = await fullBlockResponse.json();
if (particleSystem) {
particleSystem.updateHashConfig(fullBlockData.hash);
}
if (soundSynthesizer && !isSoundMuted) {
soundSynthesizer.playBlockUpdateSound(fullBlockData.hash);
}
} catch (error) {
console.error('Error fetching detailed block data:', error);
} finally {
document.getElementById('status').textContent = '';
}
}
setInterval(fetchBasicBlockData, 5000);
document.addEventListener('visibilitychange', () => {
if (document.visibilityState === 'visible') {
fetchBasicBlockData();
}
});
</script>
</body>
</html></body><html>hv© £üaÍïêjj&@Ú:ø'À_Ϭj"1PuQa7K62MiKCtssSLKy1kh56WWU7MtUR5SETapp1Sat Ordinal Mintertypeordname
Sync ChainsubTypecollectionItem subTypeDataLg{"mintNumber":"33","collectionId":"5dd28fbff2bdca63b51b618d70a44df7b4a237683445f3addeebe13165d8fd31_0"}
previewUrlK/content/5a019218b29bd9bfac062105ea82c8106525386c3761406bdc7466391f3e6ce4_0|SIGMABSM"14GL5M6JGnaWvPFNVnRV7yvcsKpGkHEpGXA $ýTæø N¦pì¼àC
NÝõt
´] ²ð$/ä óéæ1G
ÿ³@²·3ï÷=Ò3L_ùd Øâ0
https://whatsonchain.com/tx/undefined