|
|
|
|
|
|
|
|
document.querySelectorAll('a[href^="#"]').forEach(anchor => { |
|
|
anchor.addEventListener('click', function (e) { |
|
|
e.preventDefault(); |
|
|
document.querySelector(this.getAttribute('href')).scrollIntoView({ |
|
|
behavior: 'smooth' |
|
|
}); |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
class AudioPlayer { |
|
|
constructor() { |
|
|
this.audio = new Audio(); |
|
|
this.currentSound = null; |
|
|
this.isPlaying = false; |
|
|
|
|
|
|
|
|
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) { |
|
|
|
|
|
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; |
|
|
|
|
|
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); |
|
|
}); |
|
|
} |
|
|
|
|
|
|
|
|
this.updatePlayerUI(soundId); |
|
|
} |
|
|
|
|
|
updatePlayerUI(soundId) { |
|
|
|
|
|
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}`; |
|
|
} |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
document.addEventListener('DOMContentLoaded', () => { |
|
|
const audioPlayer = new AudioPlayer(); |
|
|
|
|
|
|
|
|
const tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]')); |
|
|
tooltipTriggerList.map(function (tooltipTriggerEl) { |
|
|
return new bootstrap.Tooltip(tooltipTriggerEl); |
|
|
}); |
|
|
}); |