i have a problem, i have a player in my website and the music i want to play is just a link of music, and i want to play it in my own player. i need some idea about this...
thanks you!..
My favorite HTML5 solution for audio right now is this project: http://kolber.github.com/audiojs/
It "fixes" the users browser so the HTML5 <audio /> tag works no matter which browser they are using (IE, FF, Safari, etc). Then with just a sprinkling of JS you can just add something like this to your page:
<audio src="/mp3/juicy.mp3" preload="auto" />
Check out the project page, the setup shouldn't take more than 5-10 minutes.
Apparently there is also a videojs library to run HTML5 video. Its slightly more complicated but if you combine the two, it should give you all the power you need.
http://videojs.com/#getting-started
Related
I've created a short animation, that I would like to implement into my website.
The animation is only a couple of seconds long and it has no sound.
I would like to implement it, like one would implement a GIF, meaning: I want it to autoplay, run in a constant loop and I don't want there to be any controls.
And so I rendered a GIF and for comparison I also rendered a .mp4-video and the .mp4 is far superior:
mp4: Looks exactly like I want it to look.
GIF: Even after splitting the frame-rate in half, the GIF-file is still about 5x larger then the .mp4 and it looks very noticeably worse.
So, of course, I'm implementing the .mp4 and this is how I did it: <video autoplay muted loop> – This works perfectly fine on desktop, but it does not work perfectly fine on mobile.
On Desktop it basically behaves like a GIF, but on mobile it does not autoplay and when I click on play it opens the video in a sort of "lightbox", or player, where everything else is gone and I just see the video.
I want the video, on mobile, to also autoplay and I don't want the browser to open any sort of player, how can I do this? Or: Is this possible?
I really don't wanna work with a GIF, if possible. The .mp4 is just much better.
If this is not possible with CSS, maybe there is a JS-way?
I've tried it on a mobile device and it auto plays fine for me. Perhaps the playsinline attribute could help you out.
You should use the playsinline attribute for mobile devices if you don't want the video to start in fullscreen while playing.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video#attr-playsinline
I am making a fan site for a music artist and I am having trouble with finding a reliable way to stream the music on the site. I have tried many different methods and none are giving me the results I am looking for.
I need the player to accept a direct URL as the source for the audio. As well as working on as many operating systems/browsers as possible. All of my audios are in mp3 format.
I currently have it working, but for some reason it seems like a hit or miss when the page loads some of the players work, some don't.
I have tried different hosting services and that didn't make a difference, so the issue is within the player itself.
I have modded this player to use in my site. This is the best of the many that I've tried, but if only it would load the songs more reliably I would be happy.
http://designmodo.com/audio-player/
And this is my audio tag in html.
<div class="audio-player">
<h1> Yea</h1> <h2> May 23, 2016</h2>
<h3> Lil Uzi Vert </h3>
<img class="cover" src="../playerimgs/cover.png">
<audio preload class="part14" src="http://dopefile.pk/mp3embed-df1s7uzu0d6b.mp3" type="audio/mp3" controls="controls"></audio>
</div>
I have many players on the same page. Some of them work on initial page load, and some of them require many refresh clicks to actually load. This is not practical.
So I am looking for one of two things,
1- How to fix my player so it is always working on initial load.
2- A different music player that is more reliable.
I know this idea is not impossible, but I am not having any luck finding the best way to do this. I've searched and used over a dozen different players and none work as much as this one. The only problem I am having with this setup is the music players not always working for some odd reason.
I can add the javascript if necessary, but I did not edit that at all.
Also, I do not plan on embedding other players in my site. I have tried this already and it is not efficient at all.
Thanks for any help or advise.
This website is a great example of what I would like my player to be like.
https://jams.to/
And this is my temporary page that I am working with my players on,
http://www.luvallday.com/Posts/Allsongs.aspx
I've done some work integrating audio into HTML5 games/interactive experiences, and the best library I've worked with so far is Howler. Very clean and easy to use API, and it performed very well cross-browser.
If you want your music to play automatically when page loads just add the "autoplay" attribute to the element tag...
Example :
<audio class="part14" src="http://dopefile.pk/mp3embed-df1s7uzu0d6b.mp3" type="audio/mp3" controls="controls" autoplay></audio>
Rare but if autoplay fails:
<script>
if(document.readyState == "complete"){
//grab the first player
var player = document.getElementsByTagName('audio')[0];
//play it
player.play();
}
</script>
Or
If you are more advanced I'd recommend wavesurfer.js , it gives a good music player for visuals ..
Here : http://wavesurfer-js.org/
So I found this player call Amazing Audio Player and it is pretty great. It worked well for what I wanted to do.
Let's say we embed a YouTube video on a web page.
Underneath the video player, could we display subtitles synched to the video using a media framework like Popcorn.js?
Interesting you mentioned Popcorn.js, because Popcorn does support Youtube.
http://popcornjs.org/popcorn-with-youtube
Buuut, that documentation is out of date.
It is now:
"var example = Popcorn.youtube("
There are new docs on their way.
If you choose the HTML5 version when embedding the YouTube video and if it's actually being played within an HTML5 browser, it's just a video tag so you can use Popcorn.js. When it's a Flash, I'm not sure if you can get into that Flash and know the progress and listen to the events.
If you use the YouTube JavaScript Player API, you can use player.getCurrentTime() to find out which line of subtitling to show.
Then again, YouTube already supports subtitles to begin with.
I am working on a project, and my current task is add a feature to listen audio file directly in the web page. What options do I have? All files are mp3, and the page contains about 15 audio files
Unfortunately, the flash player looks like only one possible solution and I just hope if somebody will give me a clue how to make the feature done without it.
Update: Thanks for the direction with audio tag!
The short answer is that native HTML5 audio will not work in all browsers (such as IE6, 7, and 8). Likewise, Flash audio will not work in mobile Safari. Your best bet for a production-grade solution is an audio abstraction framework that will use either HTML5 or Flash-based audio based on the client's browser. Fortunately, there is such a framework, based in jQuery, called jPlayer.
The <audio> tag! Note that different browsers support different compression solutions. Currently OGG Vorbis seems to be the most appropriate format to convert the audio into.
Edit: I seems that some browsers support OGG and some browsers support MP3. If you can, have both versions available and upload both. Then, in the markup have a declaration that looks like this:
<audio controls autobuffer>
<source src="audio.mp3" />
<source src="audio.ogg" />
</audio>
Try the audio tag in html5
http://www.w3schools.com/html5/tag_audio.asp
http://html5doctor.com/native-audio-in-the-browser/
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.