The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> How to play Audio file?
Morkus
post Sep 21 2021, 09:36 AM
Post #1





Group: Members
Posts: 2
Joined: 21-September 21
Member No.: 28,104



Hello,

I'm trying to get some basic HTML/JS code working to play an audio file.

What I have so far isn't working and I can't find a complete example. I'm using FireFox, Safari, and Chrome as the destination browsers.

Can someone explain what I need to do to get this HTML/JS to work?

Ideally, I want to put "VCR"-type controls to "play", "pause", and "rewind".

CODE
<!DOCTYPE html>
<html lang="en">
<head>
    <script>
        let x = document.getElementById("audio_file");
        document.getElementById("audio_file").controls = true;

        function playAudio()
        {
            x.play();
        }

        function pauseAudio()
        {
            x.pause();
        }
    </script>
    <meta charset="UTF-8">
    <title>Play Audio</title>
</head>
<body>
<div id='audio_file'>
    <audio>file:///Users/.../Desktop/myaudio.mp3</audio>
</div>
<button type="button" onclick=playAudio();>Play</button>
</body>
</html>
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Sep 21 2021, 01:06 PM
Post #2


.
********

Group: WDG Moderators
Posts: 9,628
Joined: 10-August 06
Member No.: 7



Hello!

No personal experience with AUDIO, but it seems the script tries to give player controls to the DIV element, which is incorrect. It's the AUDIO element that uses those controls. There are some other issues as well, see https://developer.mozilla.org/en-US/docs/We...L/Element/audio for code examples.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Morkus
post Sep 21 2021, 01:13 PM
Post #3





Group: Members
Posts: 2
Joined: 21-September 21
Member No.: 28,104



Thanks very much.

I finally got it working! smile.gif

Appreciate your reply.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
2 User(s) are reading this topic (2 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 19th March 2024 - 02:36 AM