Quantcast
Channel: Active questions tagged svelte - Stack Overflow
Viewing all articles
Browse latest Browse all 1541

Image Source Not Updating on Audio Element State Change

$
0
0

I'm implementing a basic audio player using Svelte (version 4.2.8), with SVG images for the interface icons, but the play/pause icons are not updating as expected.

Stripped-down version of the code:

<script>    export let audioPath;    let audioElement, playButton, seekBar;    let currentlySeeking = false;    const checkForAudioSource = () => !!audioElement.getAttribute('src');    function togglePlayButton() {        if(checkForAudioSource()) {            if(audioElement.paused || audioElement.ended) audioElement.play();            else audioElement.pause();        }    }    // Seek bar event handling, from Develop HP: https://www.developphp.com/video/JavaScript/Audio-Seek-and-Volume-Range-Slider-Tutorial    const startSeeking = () => currentlySeeking = true;    function endSeeking() {        currentlySeeking = false;        if(checkForAudioSource()) audioElement.currentTime = Number(seekBar.value);    }    function updatePlayer() {        if(checkForAudioSource() && !currentlySeeking) seekBar.value = audioElement.currentTime.toString();        timeout = setTimeout(updatePlayer, 100);    }    onMount(() => updatePlayer());</script><audio src={audioPath} preload="metadata" bind:this={audioElement}></audio><div id="audio-player"><button on:click={togglePlayButton} bind:this={playButton}><img src={audioElement?.paused || audioElement?.ended ? "/svg/play.svg" : "/svg/pause.svg"} alt={audioElement?.paused || audioElement?.ended ? "Play" : "Pause"}></button><input type="range" value="0" step="0.1" on:mousedown={startSeeking} on:mouseup={endSeeking} bind:this={seekBar}></div>

Clicking the play/pause button does cause the audio file to play or pause as expected, and the seek bar updates as expected while playing and can be used to go to a specific moment in the sound file. However, the src and alt attributes of the play/pause button always remain "/svg/play.svg" and "Play" respectively, no matter when you click on the button (when the sound is at the beginning, the end, or in the middle).

I've tried doing some variations on the syntax of the event handling, but always got the same result. Is there something I'm missing here? Thanks so much in advance!


Viewing all articles
Browse latest Browse all 1541

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>