Autoplay audio not working in HTML and JS

Question

1.00/5 (1 vote)

See more:

I have tried to add audio to a webpage of mine which is supposed to run automatically once the page is loaded, but it doesn't work.

HTML

<!DOCTYPE html>
<html>
<head><title>Feedback</title>
<style>
    body{
        font-family: Calibri, 'Gill Sans', 'Gill Sans MT', 'Trebuchet MS', sans-serif;
        align-items: center;
        justify-content: center;
        background-image: url(back.png);
        background-size: cover;
        background-repeat: no-repeat;       
        background-attachment: fixed;
    }
    #input{
        padding: 2px;
        font-style: Calibri;
        border: 2px solid black;
        border-radius: 2px;
        transition: 0.3s ease;        
    }
    #input:focus{
        color: white;
        background: rgba(0,0,50.2, 0.5);        
    }

    .form{
        margin: auto;
        align-items: center;
        justify-content: center;
        max-width: max-content;
        padding: 2% 4%;
        background-color: white;
        border-radius: 30px;
        box-shadow: -15px -15px 15px rgba(225, 225, 225, 0.2),
             15px 15px 15px rgba(0,0,0,0.1),
              -10px -50px 50px rgba(0, 0, 0, 0.2),
              50px 50px 50px rgba(0,0,0,0.1);
        margin-top:4%;
        animation: top 1s;
        
    }
    input[type=Submit], input[type=Reset]{
        padding: 9px 12px;
        color: white;
        background-color: navy;
        border: none;
        border-radius: 5px;
        cursor: pointer;
        transition: 0.3s ease;
        font-family: comic sans MS;
        font-weight: bold;
    }
    input[type=Submit]:hover, input[type=Reset]:hover{
        background-color: #047acf;
    }
    @keyframes top{
        from{
            opacity: 0;
            margin-top: -10%;
        }
        to{
            opacity: 1;
            margin-top: 4%;
        }       
    }


</style></head> 
<body> 
<div class="form">
<h2>Please provide the following information</h2>

<form action="mailto: myid@gmail.com" method="post">
    <p>Enter your name:* <input type="text" name="urname" size="30" maxlength="20" id="input"required><br><br>
       Address:* <input type="text" name="address"  maxlength="50" id="input"required><br><br>
       City:* <input type="text" name="city" size="20" maxlength="20" id="input"required><br><br>
       
       Mobile:* <input type="number" name="mobile" size="10" maxlength="10" id="input"required><br><br>
       
       <br>
       <br>
       How much would you rate this website?*
       <br>
       <input type="radio" name="rate" id="radio1" required> 
       <label for="radio1">Excellent</label>      
       <input type="radio" name="rate" id="radio2"required>
       <label for="radio2">Good</label>  
       <input type="radio" name="rate" id="radio3"required>
       <label for="radio3">Average</label>  
       <input type="radio" name="rate" id="radio4"required>
       <label for="radio4">Bad</label>  
       <input type="radio" name="rate" id="radio5"required>
       <label for="radio">Very bad</label>  
       <br>
       <br>
       Comments:*<br> <textarea name="comments" id="input" cols="50" rows="4" wraprequired></textarea><br><br>


<input type='Submit' value ="SUBMIT">
<input type='Reset' value ="RESET" ></p>
</form>
</div>
<audio autoplay id="aud">
    <source src="videoplayback.mp3" type="audio/mpeg">
</audio>
</body>
</html>

What I have tried:

I have tried starting the audio via javascript, but I get the error:

Quote:
Uncaught TypeError: Cannot read property 'play' of null

The script:

HTML

<!DOCTYPE html>
<html>
<head><title>Feedback</title>
<style>
    body{
        font-family: Calibri, 'Gill Sans', 'Gill Sans MT', 'Trebuchet MS', sans-serif;
        align-items: center;
        justify-content: center;
        background-image: url(back.png);
        background-size: cover;
        background-repeat: no-repeat;       
        background-attachment: fixed;
    }
    #input{
        padding: 2px;
        font-style: Calibri;
        border: 2px solid black;
        border-radius: 2px;
        transition: 0.3s ease;        
    }
    #input:focus{
        color: white;
        background: rgba(0,0,50.2, 0.5);        
    }

    .form{
        margin: auto;
        align-items: center;
        justify-content: center;
        max-width: max-content;
        padding: 2% 4%;
        background-color: white;
        border-radius: 30px;
        box-shadow: -15px -15px 15px rgba(225, 225, 225, 0.2),
             15px 15px 15px rgba(0,0,0,0.1),
              -10px -50px 50px rgba(0, 0, 0, 0.2),
              50px 50px 50px rgba(0,0,0,0.1);
        margin-top:4%;
        animation: top 1s;
        
    }
    input[type=Submit], input[type=Reset]{
        padding: 9px 12px;
        color: white;
        background-color: navy;
        border: none;
        border-radius: 5px;
        cursor: pointer;
        transition: 0.3s ease;
        font-family: comic sans MS;
        font-weight: bold;
    }
    input[type=Submit]:hover, input[type=Reset]:hover{
        background-color: #047acf;
    }
    @keyframes top{
        from{
            opacity: 0;
            margin-top: -10%;
        }
        to{
            opacity: 1;
            margin-top: 4%;
        }       
    }


</style></head> 
<body> 
<div class="form">
<h2>Please provide the following information</h2>

<form action="mailto: myid@gmail.com" method="post">
    <p>Enter your name:* <input type="text" name="urname" size="30" maxlength="20" id="input"required><br><br>
       Address:* <input type="text" name="address"  maxlength="50" id="input"required><br><br>
       City:* <input type="text" name="city" size="20" maxlength="20" id="input"required><br><br>
       
       Mobile:* <input type="number" name="mobile" size="10" maxlength="10" id="input"required><br><br>
       
       <br>
       <br>
       How much would you rate this website?*
       <br>
       <input type="radio" name="rate" id="radio1" required> 
       <label for="radio1">Excellent</label>      
       <input type="radio" name="rate" id="radio2"required>
       <label for="radio2">Good</label>  
       <input type="radio" name="rate" id="radio3"required>
       <label for="radio3">Average</label>  
       <input type="radio" name="rate" id="radio4"required>
       <label for="radio4">Bad</label>  
       <input type="radio" name="rate" id="radio5"required>
       <label for="radio">Very bad</label>  
       <br>
       <br>
       Comments:*<br> <textarea name="comments" id="input" cols="50" rows="4" wraprequired></textarea><br><br>


<input type='Submit' value ="SUBMIT">
<input type='Reset' value ="RESET" ></p>
</form>
</div>
<audio autoplay id="aud">
    <source src="videoplayback.mp3" type="audio/mpeg">
</audio>
<script>
window.onload = ()=>{document.querySelector('#aud').play();}
</script>
</body>
</html>

Posted 1-Aug-21 1:56am

Mr.Kcoder

Updated 1-Aug-21 22:50pm

v2

Add a Solution

Comments

Richard MacCutchan 1-Aug-21 8:45am

The message is clearly telling you that document.querySelector('#aud') does not find the item. Where is the actual Javascript?

Mr.Kcoder 1-Aug-21 8:52am

But how is that ever possible! I have mentioned the id in the audio tag.
Would be glad if you have a solution

Richard MacCutchan 1-Aug-21 8:54am

Where is the script that is searching for the item?

Mr.Kcoder 1-Aug-21 8:57am

The javascript code is given in the "What I have tried" section. It is the only JS code.

Richard MacCutchan 1-Aug-21 8:57am

Yes but it is not in that web page, so where is it?

Mr.Kcoder 1-Aug-21 9:22am

I have updated it

Richard MacCutchan 1-Aug-21 9:26am

I see a different error in the log:

zzz.htm:118 Uncaught (in promise) DOMException: play() failed because the user didn't interact with the document first. https://goo.gl/xX8pDD

See Autoplay policy in Chrome - Chrome Developers[^].

Mr.Kcoder 1-Aug-21 21:48pm

I managed to get the above error and managed to get it playing.
Thank you!

Richard MacCutchan 1-Aug-21 10:03am

I have tried a number of issues, to get round the Chrome restriction. I managed to get it to work by moving the script to a part of the web page that follows some user interaction, and it works fine. So the document.querySelector('#aud') statement certainly works.

Dave Kreskowiak 1-Aug-21 11:05am

Why would you want to do this? NOBODY likes audio playing automatically when they visit a web page.

Mr.Kcoder 1-Aug-21 20:49pm

Curiosity

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Richard Deeming · Answer 1 · 2021-08-01T22:50:00

Autoplaying audio, and videos with an audio track, is blocked by default:
Autoplay guide for media and Web Audio APIs - Web media technologies | MDN[^]

You would need to convince every user of your site to "whitelist" your site in order for this to work.

And as Dave said, it will be extremely annoying, and will only result in people leaving your site immediately.