Troubleshooting the issue of autoplay not functioning in HTML5 audio

I'm facing a strange issue with my code - the autoplay feature for audio is not working as expected.

Typically, whenever I insert this particular piece of code into a website, the music starts playing automatically. However, it seems to be malfunctioning in this specific instance.

Please take a look at the footer code below:

<footer>
    <ul>
        <h1>
            <a href="#"><img src="images/topoPirelli.png" alt=""></a>
        </h1>
    </ul>
    <audio class="audio" loop autoplay="autoplay" controls>
        <source src="1.ogg" type="audio/ogg">
        <source src="1.mp3" type="audio/mpeg">
    </audio>
</footer>
</div>
</body>
</html>
javascriptcsshtmlaudio

Answer №1

I encountered a similar issue, but I was able to resolve it by utilizing jquery:

$('audio').on('canplay', function() {
    this.play();
});

Update: Recently, I've observed that many browsers prevent autoplay when there is sound in the video. To address this, you can include the muted attribute.

<video autoplay muted>

Answer №2

Give this a shot: 

<audio class="music" controls autoplay>
  <source src="./song.ogg" type="audio/ogg">
  <source src="./song.mp3" type="audio/mpeg">
 <!-- <embed height="50" width="100" src="./1.mp3"> IGNORE THIS -->
</audio>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Error code 403 is returned when attempting to send an ajax Post request, indicating

While my code runs smoothly on localhost using a WAMP server, I encountered a 403 (forbidden) error after transferring it to a shared hosting environment. My first attempt was: $.post('login.php?login', { user_email: user_email, user_password: u ...

javascriptphpajaxxmlhttprequest

problem with running a node server on localhost

I've been attempting to test a simple Javascript file, but I'm encountering difficulties. When I try to load the page in my browser, it seems to be stuck loading forever with no warnings. At the bottom of the page, a text bar appears stating "wai ...

javascriptnode.jsexpress

Dynamic Text Labels in Treemap Visualizations with Echarts

Is it possible to adjust the text size dynamically based on the size of a box in a treemap label? I haven't been able to find a way to do this in the documentation without hardcoding it. Click here for more information label: { fontSize: 16 ...

javascriptreactjstypescriptecharts

Instant urban locator

Is there a way to automatically populate the visitor's city in the membership form? Member Register Form Name: Emre Email:--- Pass:--- City: Istanbul // Automatically detected location How can I implement automatic location detection for the ...

phpjavascriptlocation

Tornadofx highlight selected row with CSS

I am attempting to modify the background color of a selected row and apply the same change to a listview. When I use cell{backgroundColor += Color.BLACK}, it successfully changes the color, but it does not retain the selection color as intended.I have al ...

csskotlintornadofx

Display the text from a function in an imported component using React

Attempting to break down HTML chunks into smaller pieces stored in the components folder. (Note: the HTML is actually written in JSX). The goal is to import the [Navigation] component and have it display its content. I am aware that there are tools avail ...

javascriptreactjsrenderjsxcode-splitting

Restoring list item to standard CSS styling

I am having trouble with the alignment of my links. They are currently displayed in a horizontal manner instead of vertically like this: First link Second link Third link The current layout shows the links next to each other as follows: Firs ...

htmlcsshtml-listsitems

Creating interactive PDF files using ReactJS

Is there a way to create a PDF using React that supports styling and allows the content to be hidden on the page? I need to have a link in my app that, when clicked, generates a PDF and opens it in a new tab. I've tried out various packages but none s ...

javascriptreactjspdfjspdfhtml2canvas

How can I create an asynchronous route in AngularJS?

I implemented route and ngView to display dynamic content, however I received a warning message: The use of Synchronous XMLHttpRequest on the main thread is deprecated due to its negative impact on user experience. For more assistance, please refer to ...

javascriptjqueryangularjs

How can I change the behavior of the Enter key in text fields to automatically submit the form, rather than requiring the user to

Utilizing material UI for my component library, I have a compact dialog with a "recover password" button placed within the form. However, upon adding this button, I noticed that pressing the "enter" key in the text fields triggers the onClick event of the ...

javascriptreactjsformsmaterial-ui

PHP receive apostrophe from $_GET array

Similar Question: “slash before every quote” issue Hello there, I am currently attempting to utilize $_GET in order to transmit the contents of a text box to another php file. However, whenever I include single (') or double (") quote ...

phphtml

Retrieve a JSON WebMap using an ArcGIS JavaScript API Map object

Is there a way to retrieve a JSON representation of a WebMap object from a JavaScript Map object in the ArcGIS JavaScript API without relying on ArcGIS.com? It would be ideal if there was a method similar to: webMapAsJSON = map.toWebMap(); The "Export We ...

javascriptjsonarcgisarcgis-js-apiarcgis-server

Developing a trivia game using HTML and JavaScript

I'm in need of some serious assistance with creating a quiz using HTML. My goal is to have a web page where users can visit, take a quiz, and have their responses stored. Unfortunately, I don't have the knowledge or skills required to do this on ...

javascriptjqueryhtml

Customize the styling of an individual 'LI' item within an array by utilizing Jquery

Just starting out with Javascript and jQuery. Created a basic image slider that's running into a jQuery problem. Here's the HTML for the image list: <div id = "slider-auto"> <ul class= "slides"> <li class = "slide"&g ...

javascriptjquery

Issue encountered while trying to modify the color of a placeholder

Whenever I attempt to modify the placeholder's color: ::-webkit-input-placeholder { /* WebKit, Blink, Edge */ color: #909; } :-moz-placeholder { /* Mozilla Firefox 4 to 18 */ color: #909; opacity: 1; } : ...

htmlcsspseudo-elementpseudo-class

Trouble encountered in PHP: Generating a file from POST data and initiating download prompt for the user not functioning as intended

On my webpage, users fill out forms and input fields, which are then sent to a PHP page via Ajax and $_POST. The PHP file successfully writes the output to a txt file. However, I'm facing an issue trying to prompt the user to download the file on the ...

javascriptphpajax

Is the script failing to retrieve the innerHTML content?

Here is a snippet of HTML code: <div id="team_players"> <h3>Players</h3> <button class="bold-btn" onclick="teamAct('player_list');">Refresh List ↻</button> <table> <thead> <tr> ...

javascriptjqueryhtml

Adding extra space to the list items in CSS causes the text to become static and unaffected by fluctuations in the line-height

Here's the problem I'm facing: I have a basic list consisting of a shopping cart, login and user registration. I want to adjust the position of the list by adding padding, but every time I do so, the line height also increases. Is there a workaro ...

css

What is the process for creating a Sass mixin that declares a selector at the base level, rather than nested within another

Apologies for the unconventional terminology in the query, but I am struggling to find better words to describe it. Hopefully, this example will clarify my intention: scss-syntax .my-smug-selector { @include my-smug-mixin(30px); } desired css-output ...

csssassmixins

Ways to retrieve JSON data through multiple levels of nested if statements

Currently, I am using CodeIgniter to work on a small project involving creating batch lists. When an admin attempts to create a new batch list, they must input the start date, end date, start time, and end time. The system will then check the database to s ...

phpjqueryjsonhtmlcodeigniter-3