Feature request: Add Rewind/Fast-Forward 15 seconds to audio controls player

[javierxio]

Hello. Someone on the fb group mentioned that they would like the ability to rewind/fast-forward by 10 seconds. Not sure if it is possible but I told them that I would bring it up with the developer. Thanks.

[jwkent]

I think the easiest way to accomplish this would be to get the razor page to use a video control instead of an audio control. I tried for awhile to do this but was unsuccessful and gave up. Perhaps someone with more determination could make it work. The video control has more default features like the one being asked for. We are trying to use default things that are managed by the host OS of where ever the web app is being run.

[javierxio]

Thanks. I will take a look at it.

[benjkent]

Just to save everyone some time MDN

[javierxio]

Can someone try this code for audioObserver.js

I do not have the environment to run the code myself. Thanks.

function timeStamper(storedValue) {
    const audioElement = document.getElementById("audioPlayer");
    const rewindButton = document.getElementById("rewindButton");
    rewindButton.addEventListener("click", () => {
      audioElement.currentTime -= 10;
    });

    const fastForwardButton = document.getElementById("fastForwardButton");
    fastForwardButton.addEventListener("click", () => {
      audioElement.currentTime += 10;
    });
    audioElement.preload = 'auto';
    audioElement.addEventListener('loadedmetadata', () => audioElement.currentTime = storedValue);
    audioElement.addEventListener('timeupdate', (event) => {
        localforage.setItem(audioElement.getAttribute("src"), audioElement.currentTime).then((value) => { })
            .catch((err) => {
                console.log(err);
            });
    });
    if ('mediaSession' in navigator) {
        navigator.mediaSession.metadata = new MediaMetadata({
            title: audioElement.getAttribute("title"),
            artist: audioElement.getAttribute("artist"),
            album: audioElement.getAttribute("category"),
            artwork: [
                {
                    src: "./images/TNPMedia96.png",
                    sizes: "96x96",
                    type: "image/png",
                },
                {
                    src: "./images/TNPMedia128.png",
                    sizes: "128x128",
                    type: "image/png",
                },
                {
                    src: "./images/TNPMedia192.png",
                    sizes: "192x192",
                    type: "image/png",
                },
                {
                    src: "./images/TNPMedia256.png",
                    sizes: "256x256",
                    type: "image/png",
                },
                {
                    src: "./images/TNPMedia384.png",
                    sizes: "384x384",
                    type: "image/png",
                },
                {
                    src: "./images/TNPMedia512.png",
                    sizes: "512x512",
                    type: "image/png",
                },
            ],
        });
        navigator.mediaSession.setActionHandler('play', () => {
            audioElement.play();
        });
        navigator.mediaSession.setActionHandler('pause', () => {
            audioElement.pause();
        });
        navigator.mediaSession.setActionHandler('seekbackward', () => {
            audioElement.currentTime -= 10;
        });
        navigator.mediaSession.setActionHandler('seekforward', () => {
            audioElement.currentTime += 10;
        });
    }
}

[benjkent]

Should work fine only one minor issue, I will run it in a few hours or at the latest this evening. Thanks

[javierxio]

I suppose it should auto-resume the play after rewind and fast-forward :D

function timeStamper(storedValue) {
    const audioElement = document.getElementById("audioPlayer");
    const rewindButton = document.getElementById("rewindButton");
    rewindButton.addEventListener("click", () => {
      audioElement.currentTime -= 10;
      audioElement.play();
    });

    const fastForwardButton = document.getElementById("fastForwardButton");
    fastForwardButton.addEventListener("click", () => {
      audioElement.currentTime += 10;
      audioElement.play();
    });
    audioElement.preload = 'auto';
    audioElement.addEventListener('loadedmetadata', () => audioElement.currentTime = storedValue);
    audioElement.addEventListener('timeupdate', (event) => {
        localforage.setItem(audioElement.getAttribute("src"), audioElement.currentTime).then((value) => { })
            .catch((err) => {
                console.log(err);
            });
    });
    if ('mediaSession' in navigator) {
        navigator.mediaSession.metadata = new MediaMetadata({
            title: audioElement.getAttribute("title"),
            artist: audioElement.getAttribute("artist"),
            album: audioElement.getAttribute("category"),
            artwork: [
                {
                    src: "./images/TNPMedia96.png",
                    sizes: "96x96",
                    type: "image/png",
                },
                {
                    src: "./images/TNPMedia128.png",
                    sizes: "128x128",
                    type: "image/png",
                },
                {
                    src: "./images/TNPMedia192.png",
                    sizes: "192x192",
                    type: "image/png",
                },
                {
                    src: "./images/TNPMedia256.png",
                    sizes: "256x256",
                    type: "image/png",
                },
                {
                    src: "./images/TNPMedia384.png",
                    sizes: "384x384",
                    type: "image/png",
                },
                {
                    src: "./images/TNPMedia512.png",
                    sizes: "512x512",
                    type: "image/png",
                },
            ],
        });
        navigator.mediaSession.setActionHandler('play', () => {
            audioElement.play();
        });
        navigator.mediaSession.setActionHandler('pause', () => {
            audioElement.pause();
        });
        navigator.mediaSession.setActionHandler('seekbackward', () => {
            audioElement.currentTime -= 10;
        });
        navigator.mediaSession.setActionHandler('seekforward', () => {
            audioElement.currentTime += 10;
        });
    }
}

[benjkent]

Needs some tightening up but, this area could be used for the RW and FF controls. The advantage would be that we retain the 140px player height.

[benjkent]

Working on it.