<audio controls="controls" preload="auto">
<source src="src/audio/blog_audio/music_file.ogg" type="audio/ogg" />
Your browser does not support the audio element.
<source src="src/audio/blog_audio/music_file.mp3" type="audio/mp3" />
Your browser does not support the audio element.
<source src="src/audio/blog_audio/music_file.aac" type="audio/aac" />
Your browser does not support the audio element.
</audio>
I searched a lot here for a solution to the problem of playing the audio in the html5 file not working, and I did not find a solution to my problem, so I want to repeat the question in another form: the audio file works on the device or local host, but after uploading to the server it does not work.
I think the code is written correctly and I don't know how to solve it
I modified the mp3 audio file type to type="audio/mpeg"
This is the console error
https://imgur.com/a/GUS48j2
Please help to solve the problem
Thank you all
This is not from your code. The problem appear because you don't set the correct permissions for the file, this is why you get a 403 error and you can't play audio files on your page.
(I know my answer is a little bit blur, hope someone else could help you better ...)
Related
I'm building a website that queries the iTunes API, and in the browser I need to be able to play the 30-second song previews associated with each song in the API (which are in .m4a format)
I've tried playing the file in both of the following ways, but neither worked:
<audio controls="controls">
<source src={track1} type="audio/m4a" />
</audio>
<video width="320" height="240">
<source src={track1} type="video/mp4">
</source>
</video>
When I tried using the audio tag, a media player appeared on the page, but it didn't actually load the file.
I've been researching this for a couple of hours but I haven't been able to find a way of accomplishing this (it doesn't seem like it should be this hard). Does anyone have any ideas of how I might make get this working? Thanks very much
Did you check the path of your sound files is correct? I was having this same issue on a React project.
Check the network tab in Dev tools to see what the status code is for your sound file resource. If it's 206 then it's most likely a file path issue:
I am trying to build a feature on my web application that pulls the preview url from Spotify's API, and play the preview when the user clicks on the audio controls. I am able to save the correct URL in the source, but the song does not play. I looked at the MDN Docs, but still could not get it to work. Here is a snippet of my code in JSX:
<div className="audio-container">
<audio controls="controls">
<source src={this.props.songs[2].href} type="audio"/>
</audio>
<p className="font-style">{this.props.songs[2].name}</p>
</div>
I do not receive any errors. Is there anything obvious I am missing? Thank you in advanced!
This should work if you use type="audio/mpeg"
Working example below:
<audio controls="controls">
<source src="https://p.scdn.co/mp3-preview/83090a4db6899eaca689ae35f69126dbe65d94c9?cid=null" type="audio/mpeg"/>
</audio>
For anybody who may find this useful later, I got the audio to work by removing the source tag and putting the preview url directly in the audio tag. Example:
<audio controls src="..."></audio>
I have an audio tag inside body which contains an audio file.I want to play it when the body has finished loading.It plays in chrome but it fails to play in mozilla firefox.I tried to download the file and then play it with the local file but i got similar results.
Here's the audio tag declaration in the html:
<audio id="audio" src="http://jPlayer.org/audio/mp3/gbreggae-leadguitar.mp3"></audio>
And here is the JS used to play the audio after the body loads:
document.body.onload=function(){
document.getElementById("audio").play();
};
Use .ogg format, i had same problem and this thing solved my problem.
see below:--
Hope it helps.
<audio id="Green">
<source src="assets/audio/Green.mp3" </source>
<source src="assets/audio/Green.ogg">
</audio>
I'm having a problem with mediaelement js and webm files in FF. I have converted a mp4 vide into a webm file, and made it available on my server. I'm using the code below.
<video width="320" id="player1" height="240" controls="controls">
<source type="video/webm" src="somefile.webm" />
<source type="video/ogg" src="somefile.ogv" />
<source type="video/mp4" src="somefile.mp4" />
<-- there is also a flash fallback which is working fine in FF, but I've removed it here to simplify the example -->
</video>
This works fine in all browsers except Firefox. It tells me that the file is damaged and can not be played. But, if i open firebug and open the webm-file by selecting "Open in new tab" - the video is loaded from my server and played correctly - in Firefox.
Is there anyone else who has come across the same problem and knows a solution to it? I've been searching, but i seem only to find answers saying that the file doesn't have the correct mime-type. I don't think that's the problem in my situation, since it plays very well in FF when i open it in a new tab, and not playing through mediaelement js.
Edit: The response headers in firefox, for the file that is "damaged" says "Content-Type video/webm"
Seems like the server did not set the correct Content-Type after all. I got it fixed, and now it works like a charm.
In my app, there is an audio tag, playing a MP3 file. When I minimize the app, the audio stops. So, I want to know how to keep it playing.
PD: I use JavaScript.
See this post on the win8 developer blog. It discusses (among other things) the background audio support in Windows 8.
As described in this article:
http://msdn.microsoft.com/en-us/library/windows/apps/hh452730.aspx
You can add the msAudioCategory attribute to your <audio> tag for more functionality.
For example:
<audio msAudioCategory="BackgroundCapableMedia" controls="controls">
<source src="song.mp3"/>
</audio>