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:
Related
<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 ...)
I'm making a custom scrub bar in HTML video player. I'm creating a HTML5 video player and take a currentTime from video and it is working good, but seting currentTime after moving a scrub bar dose not working.
Firstly, I want write I've tried several possiblity to resolve this problem. I disable autoplay in video and other things, what can be.
But, one thing puzzles me. I can not have a directly URL to the video, I have a URL to JSP code on the server, and this code return to me this file. What can be a problem with it? Because, if I downloaded this movie file and set URL to directly to this movie file - with extension .mp4 - all starts working good.
Maybe it's problem with it I can not have a directly url to movie file?
I don't have any ideas to resolve this porblem. I'm counting on your help
if the video stored as an .mp4 or .ogg or .webm video file format, It would play. Here is how your html may look like.
<video controls preload="metadata">
<source src="http://www.example.com/waterfall-video.mp4" type="video/mp4"/>
<source src="http://www.example.com/waterfall-video.ogg" type="video/ogg">
Video not supported.
</video>
Does phonegap support the html5 audio tag to play native mp3 file??
I want to develop an application using phonegap and play mp3 files on it.
It works when an online source is given in audio tag, like below
<audio> <!--works this way!!!-->
<source src="http://www.alexkatz.me/codepen/music/interlude.mp3">
</audio>
but when I tried it with resident mp3 file in music folder, it didnt work. Like the snippet below
<audio><!--does not work this way :(-->
<source src="music/interlude.mp3">
</audio>
I also tried the following approaches to link the file in different assets directories, but it did not work
<audio><!--does not work this way:(-->
<source src="android_asset/www/music/interlude.mp3">
</audio>
<audio><!--does not work this way :(-->
<source src="/android_asset/www/music/interlude.mp3">
</audio>
<audio><!--does not work this way :(-->
<source src="file:///android_asset/www/music/interlude.mp3">
</audio>
Then I tried the "phonegap media API" to make it work, but "phonegap media API" doesn't have progress bar and seek bar, so I would like to ask any idea to play the native audio file in phonegap.
THANKS
Given a FileEntry object, using nativeURL works fine for me. I do something like this:
<audio id='sound'></audio>
And from javascript:
var sound = $$("#sound");
sound.attr('src', myFileEntry.nativeURL);
sound[0].play();
Where myFileEntry is a variable containing a FileEntry object pointing to the audio file.
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.
Good day,
I am trying to build a simple music player using the html audio tag and some javascript. When I was coding it worked ok while the files were stored locally with both safari (on an Imac) and Firefox. Then I uploaded it to my web page to test it live and had these issues:
(1) Safari on the Imac takes about a minute to load the file and start playing
(2) Safari on the iphone doesn't autoplay the files although I used the autoplay attribute in the code....see code below)
(3) Firefox just doesn't play it! (although it played just fine when the files were local)
Seems like the files are too large....my questions are: (1) is there a way to make the loading time shorter? and (2) any idea why the autoplay doesn't work on the iPhone Safari and how to get around it?
Here is the code I used for the songs:
<audio autoplay="autoplay" controls="controls">
<source src="../audio/3.ogv" />
<source src="../audio/3.mp3" />
Your browser does not support the audio element.
</audio>
thanks for your help
diego
I believe you cannot autoplay on the iPhone. I think this is a restriction imposed in order to prevent excess accidental data usage. There were some workarounds to create a fake click, but they seem to have been patched.
Firefox doesn't support MP3 via HTML5. ogv files are Ogg Video, not Audio (ogg), which could be why it's not playing in the audio tag.
As for loading time, the best way would be to compress the file as much as possible. This would reduce the download time.
Just a heads up ... since HTML 5 isn't XML based syntactically, you don't assign attributes like that.
use <audio autoplay controls> as the opening tag.