`; const pauseSVG = ``; class AudioPlayerManager { constructor() { this.currentPlayer = null; this.players = new Map(); // Find all audio players using attribute selector const playerContainers = document.querySelectorAll('[data-audio-player]'); playerContainers.forEach((container, index) => { this.initializePlayer(container, index); }); } initializePlayer(container, index) { // Find necessary elements using attributes const playPauseBtn = container.querySelector('[data-play-pause-btn]'); const waveformContainer = container.querySelector('[data-waveform]'); const audioSrc = container.dataset.audioSrc; const rootStyles = getComputedStyle(document.documentElement); const waveColor = rootStyles.getPropertyValue('--design-system---gray-neutral--n-80').trim(); const progressColor = rootStyles.getPropertyValue('--_themes---on-primary').trim(); // Create Wavesurfer instance const wavesurfer = WaveSurfer.create({ container: waveformContainer, waveColor: waveColor, progressColor: progressColor, height: 'auto', barHeight: 1.5, barWidth: 1.4, barRadius: 2, barGap: 1.8, cursorColor: 'transparent', dragToSeek: true, backend: 'MediaElement' }); // Load audio wavesurfer.load(audioSrc); // Create unique ID const playerId = `player-${index}`; // Reset button to play state const resetButton = () => { playPauseBtn.innerHTML = playSVG; this.currentPlayer = null; }; // Play/Pause functionality playPauseBtn.addEventListener('click', () => { // If another player is playing, pause it if (this.currentPlayer && this.currentPlayer !== wavesurfer) { this.currentPlayer.pause(); const previousPlayBtn = this.findPlayButton(this.currentPlayer); if (previousPlayBtn) previousPlayBtn.innerHTML = playSVG; } // Toggle current player if (wavesurfer.isPlaying()) { wavesurfer.pause(); playPauseBtn.innerHTML = playSVG; this.currentPlayer = null; } else { wavesurfer.play(); playPauseBtn.innerHTML = pauseSVG; this.currentPlayer = wavesurfer; } }); // Reset button when audio ends wavesurfer.on('finish', resetButton); // Store player reference this.players.set(playerId, { wavesurfer, playPauseBtn }); // Initial button setup playPauseBtn.innerHTML = playSVG; } // Helper method to find the play button for a given wavesurfer instance findPlayButton(wavesurferInstance) { for (const player of this.players.values()) { if (player.wavesurfer === wavesurferInstance) { return player.playPauseBtn; } } return null; } } // Initialize players new AudioPlayerManager(); });
85% inquiries automated +16%YoY
85% inquiries automated +16%YoY
14.4M interactions handled annually +240% YoY
14.4M interactions handled annually +240% YoY
550K interactions handled monthly +80% YoY
550K interactions handled monthly +80% YoY
Let's discuss your local and secure AI deployment.
The Medical City South Luzon partners with Proto to deploy an AI customer experience platform with multilingual support, voice messaging, and automated FAQs – transforming patient engagement across Southern Luzon.