What is the procedure for automatically playing the next audio track in HTML5 after the current one finishes playing

When trying to play a single MP3 file, the code below is designed to skip to a specific part of the track and then start playing from that position. However, despite the cursor moving to the correct spot in the MP3, it fails to play upon clicking the Start button.

<!DOCTYPE html>
        <html>
        <head>
        <title>Song Limit</title>
        </head>
        <body>
        <div style="margin: 20px; text-align: center;">
        <audio id="myVideo" controls>
        <source src="gpj.mp3" type="video/mp4">
        <source src="gpj.mp3" type="video/ogg">
        Your browser does not support HTML5 video.
        </audio>
        <p>
        <b> Run Audio From Starting Point </b></br>
        <a onclick="setCurTime(0)" href="javascript:void(0)">Start from 0 sec</a>
        </p>
        <br>
        <p>
        <b> Run Audio From Starting Point </b></br>
        <a onclick="setCurTime(20)" href="javascript:void(0)">Start from 20 sec</a>
        </p>
        <br>
        <p>
        <b> Run Audio From Starting Point </b></br>
        <a onclick="setCurTime(35)" href="javascript:void(0)">Start from 35 sec</a>
        </p>
        <br>
        <p>
        <b> Run Audio From Starting Point </b></br>
        <a onclick="setCurTime(47)" href="javascript:void(0)">Start from 47 sec</a>
        </p>
        </div>
        <script>
        var vid = document.getElementById("myVideo");
        function setCurTime(time_start) {
        vid.currentTime = time_start;
        }
        </script>


        </body>
</HTML>
        </html>

Answer №1

Make sure to execute vid.play() after that, like so:

function updateCurrentTime(start_time) {
    vid.currentTime = start_time;
    vid.play();
  }

Also, don't forget to specify the appropriate file type instead of video/mp4.

Answer №2

Perhaps this solution will address your issue.

 <script>
    var vid = document.getElementById("myVideo");
      function setTimeToStart(time_start) {
      vid.currentTime = time_start;
      vid.play()
    }

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

"Empty array conundrum in Node.js: A query on asynchronous data

I need assistance with making multiple API calls and adding the results to an array before returning it. The issue I am facing is that the result array is empty, likely due to the async nature of the function. Any help or suggestions would be greatly appre ...

Receiving error message "[object Object]" while working with JavaScript

My current challenge involves adding an item to the shopping cart through a button click event that sends necessary data to a database table storing cart items. The issue arises with the item name, as I am encountering an error displaying [object Object] ...

Is there a way to make the CSS3 border-image compatible with all the latest browsers, including IE 9+, Chrome, and Firefox?

Is there a way to implement border-image for a dynamically scaling CSS container across all modern browsers using a .js framework? If not, what would be a suitable alternative? To visualize the desired effect, check out: ...

What could be the reason for the minimum width exceeding the maximum width?

As I delve into the world of web design, I am facing a bit of a learning curve after such a long break from building sites from scratch. One thing that caught my attention in Dreamweaver is the pre-fabricated Bootstrap code within the .css files. I' ...

Turn off all VuetifyJS transitions

Is there a way to completely turn off all transitions, such as the slide-x-transition or dialog modal scale transition, in VuetifyJS? ...

Tips for managing the return value of a PHP function in AJAX requests

Looking for some help with inserting HTML form data using PHP and Ajax. Below is the code I've written: <!DOCTYPE HTML> <html lang="en"> <head><title>Ajax Test</title> <meta charset="utf-8" name="viewport" con ...

Vue - Error Message from Eslint Regarding Absence of Variable in Setup Function

Interestingly, the Vue.js documentation strongly recommends using the <script setup> syntax of the Composition API. The issue with this recommendation is that the documentation lacks depth and it conflicts with other tools (like eslint). Here is an e ...

Leveraging the reduce method in processing JSON data

Here is the JSON data I have: { "meta": { "totalPages": 13 }, "data": [{ "type": "articles", "id": "3", "attributes": { "title": "AAAAA", "body": "BBBB", "created": "2011-06-2 ...

Get the docx file as a blob

When sending a docx file from the backend using Express, the code looks like this: module.exports = (req, res) => { res.status(200).sendFile(__dirname+"/output.docx") } To download and save the file as a blob in Angular, the following code snippet i ...

What is the best way to prevent automatic trimming in EJS variable assignment in Node.js?

When I attempt to write a variable from the database into an EJS table, it is being displayed with default trimming by the EJS template. However, I would like to display the variable from the database without any default trimming. I consulted the EJS temp ...

Unable to establish a breakpoint in a source-mapped file (illustrated using jQuery)

Having trouble setting a breakpoint on a minified JavaScript source file that is mapped to real sources using a source map file. An example of this problem can be seen on the website jquery.com. On this particular site, the imported script is jquery.min. ...

Challenges with navbars and Bootstrap

Just started using twitter-bootstrap and I'm trying to customize the navbar by removing borders and padding, adding a hover effect for links with a different background color, and setting margins of about 10px on the left and right. However, I'm ...

Streamline event listeners with a pair of attributes

I am working with a function that requires one parameter: function magical(element){ ... } In my project, I have multiple click handlers attached to different elements and classes that are invoking this function: $('#div1').click(function(){ ...

activate a CSS-only modal with JavaScript

Is it possible to trigger a pure CSS modal using JavaScript (jQuery) without the need for a label, so that it activates when a user visits a page? http://jsfiddle.net/h84nubzt/ <label class="btn" for="modal-one">Example</a> <!-- Modal ...

Guide for accessing Javascript documentation via console?

There are many times when I am coding in Python, that I find myself wanting to quickly access the documentation for a function. In the iPython console, I can easily do this by entering dir?? which retrieves the documentation for the dir function. Is ther ...

Utilize Angular functions in every controller in your application

Currently, I have important functionality code within app.run(function... in Angular: app.run(function($rootScope, $window) { // Obtain window dimensions $window.width = angular.element($window).width(); $window.height = angular.element($window).he ...

Include the session variable as an argument in the onload() function call

I've encountered a problem while trying to send the session variable $_SESSION["post-code"] as a parameter in the following code snippet... <body onload="getLocation('<?php echo $_SESSION['post-code'];?>')"> Within my ...

Error: The object #<HTMLCollection> does not support the 'tags' method

While trying to troubleshoot this issue, it seems like I haven't been able to pinpoint the simple solution. This particular javascript menu works perfectly in IE, however in Chrome, there is an error when trying to open the menu with a first-level cli ...

Including an Authorization header with a GET request is crucial for accessing protected

I am currently working on developing an Alexa skill utilizing the latest SDK 2.0 but I have encountered a challenge in implementing a basic HTTP GET request. Can someone guide me on how to include an authorization header to the getRemoteData URL request? T ...

Presenting CSV data in a tabular format using Angular and TypeScript

I am facing an issue with uploading a CSV file. Even though the table adjusts to the size of the dataset, it appears as if the CSV file is empty. Could this be due to an error in my code or something specific about the CSV file itself? I'm still learn ...