Can’t set currentTime on audio file on Chrome browser

my problem is that I can’t set the currentTime of my audio file on Chrome. I try to create an audio strong textstreaming platform and for that, I am using Symfony 5.

In the front side (in Twig), I have this code :

    {% set chapterPath= chapter.path|split('/') %}
    {% set chapterToken=(((chapterPath|last)|split('.'))|first) %}
    <audio
            id="chapterAudioFile"
            style="visibility: hidden"
            oncontextmenu="return false;"
            controls
            src="{{ path("app_chapter_play",{'id': chapter.id, 'chapterFileToken': chapterToken}) }}">
        Your browser does not support the
        <code>audio</code> element.
    </audio>

And to get my audio file I am asking it thanks to my route like this :

/**
     * @Route("/{id}/{chapterFileToken}", methods={"GET","POST"})
     * @param Chapter $chapter
     * @param string $chapterFileToken
     * @return Response
     */
    public function play(Chapter $chapter, string $chapterFileToken, Request $request)
    {
        $chapterPath=$chapter->getPath();
        $chapterFilename=explode("/", $chapterPath);
        $chapterToken=explode(".",end($chapterFilename))[0];

        if ($chapterFileToken==$chapterToken){
            $extension=explode(".", $chapterPath)[2];

            if ($extension=="mp3") {
                $mime_type = "audio/mpeg";
            }
            else{
                $mime_type = "audio/ogg";
            }

            if(file_exists($chapterPath)){
                $file=fopen($chapterPath,"r");
                $content=fread($file,$filesize);
                fclose($file);

                $response = new StreamedResponse(
                    function () use ($content) {
                        echo ($content);
                    });

                $response->headers->set('Content-Type', $mime_type);
                $response->headers->set('Cache-Control', '');
                $response->headers->set('Content-Length', strlen($content));
                $response->headers->set('Last-Modified', gmdate('D, d M Y H:i:s'));
                $contentDisposition = $response->headers->makeDisposition(ResponseHeaderBag::DISPOSITION_INLINE, end($chapterFilename));
                $response->headers->set('Content-Disposition', $contentDisposition);
                $response->prepare($request);
                return $response;
            }
            else return new Response(Response::HTTP_NOT_FOUND);
        }
        else return new Response(Response::HTTP_FORBIDDEN);
    }

THe problem is that it works in Firefox but not in Chrome. When I try to set the currentTime of the audio file it set it always to 0.

Javascript functions :

var audio=document.getElementById('chapterAudioFile');
        var audioDurationSlider=document.getElementById("audioFileDuration");
        var playButton=document.getElementById("playButton");
        var isPlaying=false;

        audioDurationSlider.value=0;
        audio.onloadedmetadata=()=>{
            audioDurationSlider.max=audio.duration;
        }
        audioDurationSlider.onchange = () => audio.currentTime = audioDurationSlider.value;
        audioDurationSlider.max=Math.round(audio.duration);

        audio.onplay = () =>{
            isPlaying=true;
            playButton.innerHTML="<i class="fa fa-pause"></i>";
        }

        audio.onpause= ()=>{
            isPlaying=false;
            playButton.innerHTML="<i class="fa fa-play"></i>";
        }

        audio.ontimeupdate = () => {
            audioDurationSlider.value = audio.currentTime;
            document.getElementsByClassName("rangeCurrent")[0].innerHTML=getDuration(audio.currentTime)+" | "+getDuration(audio.duration);
        }


        function playAndPause(){
            if (isPlaying){
                pause();
            }
            else {
                play();
            }
        }

        function play(){
            audio.play();
        }

        function pause(){
            audio.pause();
        }

        function getDuration(time){
            var minutes = Math.floor(time / 60);
            var seconds = Math.round(time - minutes * 60);
            var hours = Math.floor(time / 3600);

            if (minutes/10<1) {
                minutes = "0" + minutes
            }
            if (seconds/10<1) {
                seconds = "0" + seconds;
            }

            if (hours===0){
                return minutes+":"+seconds;
            }
            return hours+":"+minutes+":"+seconds;
        }

        function quickReturn(){
            if (audio.currentTime-10>=0) {
                audio.currentTime -= 10;
            }
            else audio.currentTime=0;
        }

        function quickAdvance(){
            if (audio.currentTime+10<=audio.duration) {
                audio.currentTime += 10;
            }
            else audio.currentTime=audio.duration;
        }

        function restart(){
            audio.currentTime=0;
        }

I tried a lot of solutions but none was working.

Thank you for your time and for your help in advance.

Best regards.

Source: Symfony Questions

Was this helpful?

0 / 0

Leave a Reply 0

Your email address will not be published. Required fields are marked *