File size: 2,636 Bytes
4ea3c28 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 |
// Modern smooth scroll behavior
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
document.querySelector(this.getAttribute('href')).scrollIntoView({
behavior: 'smooth'
});
});
});
// Audio player functionality
class AudioPlayer {
constructor() {
this.audio = new Audio();
this.currentSound = null;
this.isPlaying = false;
// Setup event listeners
document.addEventListener('click', (e) => {
if (e.target.closest('[data-play]')) {
const soundId = e.target.closest('[data-play]').getAttribute('data-play');
this.playSound(soundId);
}
});
}
playSound(soundId) {
// In a real app, we'd fetch the sound URL from an API
const soundUrl = `https://example.com/api/sounds/${soundId}/stream`;
if (this.currentSound !== soundId) {
this.audio.src = soundUrl;
this.currentSound = soundId;
}
if (this.isPlaying) {
this.audio.pause();
this.isPlaying = false;
} else {
this.audio.play()
.then(() => {
this.isPlaying = true;
// Update UI to show playing state
document.querySelectorAll('[data-play]').forEach(btn => {
if (btn.getAttribute('data-play') === soundId) {
btn.classList.add('playing');
btn.innerHTML = '<i data-feather="pause"></i>';
} else {
btn.classList.remove('playing');
btn.innerHTML = '<i data-feather="play"></i>';
}
});
feather.replace();
})
.catch(err => {
console.error('Error playing sound:', err);
});
}
// Update global player UI
this.updatePlayerUI(soundId);
}
updatePlayerUI(soundId) {
// In a real app, we'd fetch sound details from an API
const soundDetails = {
title: "Currently Playing",
duration: "0:45"
};
const playerEl = document.querySelector('.fixed-player');
if (playerEl) {
playerEl.querySelector('.sound-title').textContent = soundDetails.title;
playerEl.querySelector('.sound-duration').textContent = `0:12 / ${soundDetails.duration}`;
}
}
}
// Initialize when DOM is loaded
document.addEventListener('DOMContentLoaded', () => {
const audioPlayer = new AudioPlayer();
// Initialize tooltips
const tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
tooltipTriggerList.map(function (tooltipTriggerEl) {
return new bootstrap.Tooltip(tooltipTriggerEl);
});
}); |