What could be causing the audio to not function properly on the webpage I'm working on that has yet to be launched?

As I work on my webpage, I am attempting to incorporate an audio file from SoundCloud. However, it seems that the file is not playing when sourced directly from the SoundCloud website. It works fine when the source is a file stored on my computer.

<audio controls autoplay loop>

<source src="audio.mp3" type="audio/mp3">

<a href="https://soundcloud.com/grixis/peacetreaty-change-grixis">

</audio>

I have also experimented with the following code:

<audio controls autoplay loop>

<source src="https://soundcloud.com/grixis/peacetreaty-change-grixis" type="audio/mp3">

</audio>

An error message stating 'Failed to load resource: net::ERR_FILE_NOT_FOUND' is displayed.

html

Answer №1

It appears that you are including a Soundcloud link, which directs to an HTML page. To improve accessibility and ease of use, consider providing a direct mp3 link instead. For the option to play tracks from Soundcloud directly, you can embed their player into your website.

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

Using the jQuery POST method to execute a redirect upon successful completion

I am attempting to utilize jQuery to create a post method. I have implemented it within a form and used bootstravalidator for validation. Once the form is successfully validated, it is posted and the PHP code comes into action. Now, my goal is to redirect ...

phpjqueryhtmlformsbootstrapvalidator

"Preventing the propagation of a click event on an anchor tag with

Is there a way to prevent the parent anchor from executing its href when a child element is clicked, despite using stopPropagation? Here is the markup provided: <div id="parent"> <h5>Parent</h5> <a id="childAnchor" href="https:// ...

javascriptjqueryhtml

I am attempting to create a captivating image for a "jumbotron"

My goal is to achieve a full-width image that stretches across the entire website. Furthermore, I want the image to remain centered and shrink from the sides as the window size decreases. Here's what I've attempted: HTML <div class="site-ban ...

htmlcssimage

Managing class values with Selenium - Manipulating and updating classes

In the program I'm working on, there is a need to toggle which element receives the class value of "selected". <div class="countryValues"> <div data-val="" >USA and Canada</div> <div data-val="US" >USA - All< ...

pythonhtmlseleniumclasstags

I have an HTML table with multiple cells containing inner HTML tables. I have implemented a function along with buttons to filter the main table, excluding the inner tables

My HTML Table is generated from my database, containing information about machines and their status pulled from emails with HTML Tables. Each row has a click option to open/hide the <td> tag showing the original table for more details and better trac ...

javascripthtmlhtml-table

What is the best way to incorporate a CSS transition without any dynamic property changes?

Is there a way to add a transition effect to a header when its size changes without a specified height value in the CSS? The header consists of only text with top and bottom padding, so as the text changes, the height adjusts accordingly. How can I impleme ...

javascripthtmlcsscss-transitions

Utilize jQuery to extract various input/select box values and compile them into an array for submission using .ajax()

I am currently facing an issue with dynamically generated forms using PHP and updated with jQuery's .appendTo() function as visitors interact with it. My main goal is to collect all input text and select box values from the current form and submit the ...

phpjavascriptjqueryhtml

Copy and paste the code from your clipboard into various input fields

I have been searching for a Vanilla JavaScript solution to copy and paste code into multiple input fields. Although I have found solutions on the internet, they are all jQuery-based. Here is an example of such a jQuery solution <input type="text" maxl ...

javascripthtmltypescript

Is there a way to insert a label directly following a dropdown menu within the same table cell?

My goal is to include drop-down lists in a web page, so I decided to create a table structure using JavaScript. Firstly, I used the document.createElement() method to generate a table, table body, rows, and cells. Then, I proceeded to create select element ...

javascripthtmldom

Guide on presenting an image retrieved from a database with ajax

I am currently developing a straightforward mobile application that utilizes a database to store various types of content, including images. I have implemented ajax requests to retrieve this information and display it within the app. However, I am encounte ...

javascriptphphtmljsonajax

What is the best way to eliminate the left margin entirely in CSS?

I am attempting to create an image view that fully covers the window, without any margins. I have tried various solutions such as setting the body margin and padding to 0, but they do not seem to work. body { margin: 0px; padding: 0px; } or *, html { ...

htmlcssangulartypescript

Extension for Chrome that enhances YouTube video playback experience

I'm struggling to figure out why this isn't functioning. I've reviewed the Google extension dev docs and examined some sample code. Checked various Stack Overflow questions and answers, but haven't received any helpful feedback or res ...

javascripthtmlgoogle-chrome-extension

Tips for optimizing Angular source code to render HTML for better SEO performance

Our web platform utilizes Angular JS for the front-end and node js for the backend, creating dynamic pages. When inspecting the code by viewing the source, it appears like this: For our business to succeed, our website needs to be SEO-friendly in order to ...

javascripthtmlangularseo

Laravel Tutorial: Utilizing for and foreach Loops to Showcase Data in Blade Template

I am trying to use a for and foreach loop to display data based on a template table. However, I am running into an issue where the else conditions always display an index of their own. My expectation is as follows: https://i.stack.imgur.com/tqDSn.png Th ...

phphtmllaravelpostgresqllaravel-7

Display the same DIV element across various HTML tabs

When two different tabs are clicked, I need to display a set of 10 Search Fields. Both tabs have the same fields, so instead of using separate DIVs, I want to use the same DIV and only change the AJAX REST End-Point based on the selected TAB. Can someone ...

javascriptjqueryhtmlajaxtabs

What is the best way to improve the design of this division that includes buttons?

I'm having trouble with the layout of three divs I have set up. One acts as a container, while the other two are meant to hold buttons. However, something seems off and I can't figure out how to correct it. .button { display: inline-block; ...

htmlcss

Can this functionality be accomplished using only HTML and CSS, without relying on JavaScript?

Image for the Question Is it possible to create a zoom functionality using only HTML and CSS, without relying on JavaScript? I need this feature for a specific project that doesn't support JavaScript. ...

javascripthtmlcss

Displaying a message text upon successful AJAX request

I have a web page with an AJAX request that updates data in the database. After the update, I want to display a message to the user on the webpage confirming that the data has been successfully updated. However, currently, no message is being displayed and ...

javascriptphphtmlajax

Storing a string in an array in PHP: A step-by-step guide

I'm facing an issue with storing a string in an array, as it seems to not save the changes in the array properly: <?php session_start(); $username = $_POST["username"]; $password = $_POST["password"]; $users = array(); $passe ...

phphtmlarraysforms

Mobile phone experiencing issues with background loop video playback

<video autoplay muted loop id="videobg"> <source src="bgvideo/bgvideo.mp4" type="video/mp4"> </video> I have a background video on my website that works perfectly on desktop but not on iPhone. You can c ...

htmlbootstrap-4