Load the audio file, pause it, and begin playing it after a few seconds have passed

After 8 seconds, I want to use setTimeout to play an audio file:

   setTimeout(function() {
        document.getElementById('delayed_play').style.display = 'block';
    }, 8 * 1000);   
<div id="delayed_play">

The issue is that the audio file doesn't start exactly after 8 seconds due to varying connection speeds that affect the loading time.

Is there a way to load the file paused and instruct it to start playing at 8 seconds?

Here is the audio file along with the remaining script:

    <script type="text/javascript">
  document.getElementById('delayed_play').style.display = 'none';
    </script>

<object height="0" width="40%">
<embed allowscriptaccess="always" height="0" src="http://player.soundcloud.com/player.swf?url=http%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F14151193%3Fsecret_token%3Ds-OVmfN&amp;show_comments=false&amp;auto_play=true&amp;color=ff7700" type="application/x-shockwave-flash" width="100%"></embed>
</object>

Thank you

javascriptaudio

Answer №1

If you're not familiar with the API, here's a possible approach:

  1. Load the player on the page without autoplay (check for a URL parameter)
  2. Use a timer to trigger a function after the page loads, which will call the necessary API function to start the player.

Make sure to refer to the API documentation on the website for guidance.

For information on the player, visit .

The SoundCloud Player can be customized using URL parameters and controlled with a JavaScript API.

Pay attention to the auto_play parameter to control automatic playing of sound.

Refer to the 'Widget methods' section for player manipulation:

api_play() - Starts playing the player, beginning from 0 or the last paused position.

Review the 'Event types' section to set up event listeners:

onPlayerReady - Triggered when the widget is ready to accept external calls, once per instance.

onMediaBuffering - Triggered during buffering. Data includes percent, indicating track seeking limitations.

Test the buffering to determine your event listener setup, possibly utilizing onMediaDoneBuffering as well.

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

How can one transform a web-based application into a seamless full-screen desktop experience on a Mac?

"Which software can be utilized to enable a web application to display an icon on the desktop of a Mac computer, while also opening up the web application in a fully immersive full-screen mode that supports all the touch and gesture functionalities provi ...

javascriptjqueryhtmlcssgoogle-chrome

Restricting Options in jQuery/ajax选择列表

Although there are similar questions posted, my specific issue is that I am unsure of where to place certain information. My goal is to restrict the number of items fetched from a list within the script provided below. The actual script functions correct ...

javascriptjquerycssajaxhtml-lists

What is the best way to propagate a react component's props to options following an apollo-client mutation?

How can you effectively pass a react component's props to options after performing a mutation using apollo-client? I am currently utilizing react in conjunction with apollo-client. Within a specific component, I am executing a delete mutation and the ...

javascriptreactjsgraphqlapollo-client

limitation in bootstrap ensures that only one collapse element is open at any

Hey, can someone help me fix this code? I'm trying to make it so that only one element opens at a time, but I can't seem to figure out how. Right now, if I click on two elements, they both open and the other one doesn't close. This is what ...

javascripthtmlbootstrap-4

What are the drawbacks of incorporating side effects into JavaScript constructors?

In my coding, I often utilize a design pattern similar to the concept of custom objects. However, JSLint disapproves of code constructs like this: function MyClass() { this.init(); } new MyClass(data); The reason being that the newly created object is d ...

javascriptcoding-styleconstructor

"The file upload function is populating the req.body object, but not the req.file

I successfully implemented a file upload API using multer and express, which functions well when accessed through POSTMAN. However, I encountered an issue when trying to utilize the same API with another file upload API: The code I used can be found below ...

javascriptnode.jsexpressmulter

"Enhanced visuals with parallax scrolling feature implemented on various sections for an engaging

With 4 sections, each featuring a background image and text in the middle, I encountered an issue when attempting to have them fixed while scrolling. The goal was for the section below the first one to overlap the one above it along with its text as we scr ...

javascriptjquerycssparallaxparallax.js

At times, Mongoose may return null, while other times it returns data frequently

I have designed a unique mongoose schema for managing contacts, with a custom defined ID. Here is the schema structure: const mongooseSchema = new mongoose.Schema({ _id:{ type:String, unique:true, required:true }, firstN ...

javascriptnode.jsmongodbexpressmongoose

Tips for determining the height of the entire webpage using jQuery

I attempted the following code: $(window).height(); $("#content").height(); However, it did not provide an accurate value. ...

javascriptjqueryhtml

Double-clicking with Ajax and JSF after the initial click

When I interact with a dataTable that has a column named DELETE (which is a link) and has a listener attached to it, I experience an issue. After clicking on the link for the first time (click 1), the row gets deleted as expected. However, subsequent click ...

javascriptajaxjakarta-eejsf-2

Are NPM and Eslint supposed to be this confusing, or am I missing something?

Recently, I've started delving into the world of JS and have been eager to learn more about linting. Following a tutorial, we set up the lint stage in our package.json file. The configuration looks like this: "lint": "./node_modules/.bin/eslint ." U ...

javascriptnode.jsnpmeslint

Searching patterns in Javascript code using regular expressions

I am dealing with two strings that contain image URLs: http://dfdkdlkdkldkldkldl.jpg (it is image src which starts with http and ends with an image) http://fflffllkfl Now I want to replace the "http://" with some text only on those URLs that are images. ...

javascript

Is it possible to create custom input fields using the Stripes Payment-Element?

I recently integrated Stripe into my next.js application to facilitate one-time payments. Following the standard tutorial for Stripe Elements, I created a PaymentIntent on initial render: useEffect(() => { // Create PaymentIntent as soon as the ...

javascriptnode.jsnext.jsstripe-paymentsstripe-payment-intent

Steps to automatically populate the dropdown upon page load

Hello, I have a question regarding setting a value to a dropdown list in JavaScript. Currently, I am trying to execute this function during the onload event of the body tag. However, I am facing issues with setting the value. Below is the code: function s ...

javascript

ReactJS: A single digit input may result in the display of numerous '0's

My goal is to have a small box that only allows one digit, but it seems to work fine until I try to input multiple '0's. Then the box displays multiple 0000 persistently. https://i.sstatic.net/Ouot4.png https://i.sstatic.net/MMKjm.png H ...

javascriptreactjstypescript

Timer for searching webpages using Javascript

I am looking for a way to continuously search a specific webpage for a certain set of characters, even as the text on the page changes. I would like the program to refresh and search every minute without having to keep the webpage open. In addition, once ...

javascripthtml

Retrieve geographical coordinates from image metadata using JavaScript

Seeking help with extracting the GPS Exif tag from images using NodeJS. The data is currently structured as follows: { "gps": { "GPSTimeStamp": [2147483647, 76, 41], "GPSLongitude": [76, 41, 56.622], "GPSLatitude": [30, 43, 8 ...

javascriptnode.jsexif

Updating State Array dynamically with React JS

I am facing an issue with updating a UseState quantity array in real time. When clicking on a button, a new array is created with updated values for a specific object's quantity. However, the original array does not update immediately. Instead, it onl ...

javascriptreactjsarraysreact-hooksreact-state

Combine rows with the same value in the first column of an HTML table

My HTML table has dynamic content, and I need to merge rows in the first column only if their values are identical. You can see an image of the table here. Specifically, if the values in the first column match, those rows should be merged together while le ...

javascripthtmldatatable

What is the best way to ensure a function waits for a stable database connection before proceeding?

Perhaps not phrased well, but I grasp the concepts of async/promises/callbacks. My aim is to develop a module that can be imported (database.js), where I can then execute methods like database.insert() and database.read(). This is the code I have so far: ...

javascriptnode.jsasynchronouspromisemodule