So I was recently trying to learn html5 stuff and got to the audio tag. It seems to work just fine on my PC's browser, Chrome, but not so much on my android (4.0, using both the stock browser and dolphin). It will play the audio once, but never again. Take this site for example:
http://www.stefanvignir.de/rimshot/
Very basic, it has a button that plays audio every time you press it, but not on my android. It only plays the first time you press it. How do you get around this? Just wait for mobile browsers to update?
I heard a workaround is to set audio.currentTime = 0; but that didn't seem to solve anything.
Apparently you can reset the source (audio.src = audio.src) and that will allow you to play it more than once, but it has to re-download the file. A workaround, I guess, but not acceptable.
Any suggestions? Thanks.
this works in desktop and andriod browsers for multiple presses - and you can wrap in a div etc for styling:
<a onclick="this.firstChild.play()"><audio src="1.mp3"></audio>play</a>
More than just the audio tag so you have more control over what the play button looks like. If you need more buttons you can change the code for pause etc
Related
Due to a fairly recent update, Chrome no longer will autoplay media content such as video if it tries to start in a tab or window which does not have focus.
There are a few sites, including my own - which rely on switching then playing videos in the background as a music player. This has been broken by Chrome, with their idea being that it prevents annoying videos from playing.
I'm reluctant to even consider building a chrome extension to circumvent this (if that would even work), but would like to hear how if possible. Is there any way to get around this annoying issue?
edit: according to this reddit post it may not be Chrome, but YouTube's chrome specific implementation...
edit2: this Chrome issue states that “Once a tab / RenderFrame has ever played media before, it’s allowed to continue to autoplay/autoload indefinitely; this is to support playlist type applications.” - Perhaps if somehow a 'RenderFrame' contains all future media which is also loaded by AJAX this will work... whatever a render frame is (Since as noted in the comments, a page reload/change does not count as the user having allowed autoplay.)
So,
A few days ago, Google Chrome started to block Flash advertisement from auto-playing, by default.
The problem is that I'm using videojs media player to play an HLS live stream on my page.
And, since Chrome does not support HLS protocol natively, the player falls back to a small Flash file to play the video.
But Chrome thinks this Flash file is an AD - thus not allowing it to auto-play as it should.
Is there any way to tell Chrome that this file is actually an important part of my page, and not an AD?
Add an empty Flash file larger than 398x298 to the bottom of your page. I found once you have at least one Flash file above their minimum Chrome will not pause any of your Flash. You cannot hide this extra Flash file with CSS. Optionally use a javascript timeout (3 seconds) to hide the empty Flash file in case it messes with your page layout. I'm using swfObject for embedding.
I am dealing with the same issue, but I think the size of the video and location on the page are factors. Try making the video player bigger. When I went up to 410x308 the problem went away.
Today I've met an unpleasant issue. There is a website with a custom HTML5 audio player. After the page loads, I try to echo document.getElementById("myAudioId").duration, it is needed in order to make navigation possible. In every other browser it works just fine, the duration is showed, but IE11 works differently - it shows that duration equals Infinity. But as I noticed, when the song is buffered to the end, the duration magically appers and the navigation works. In other browsers everything works from the start. The content-length headers are set up. What could it be?
UPD: Other sites with HTML5 audio let me see the duration from the very start. The duration, I guess, is part of metadata and could be loaded even without preloading the audio file using preload="metadata", but it also doesn't work.
UPD2: I've also tried playing around with jsfiddle and created the same audio tag there with same MP3 audio - there was the same situation. But then I've inserted link to another MP3 there, from another site - and it worked!. More than that, I've uploaded this second song to the first problematic website and after that the song that worked perfectly couldn't also show me its duration and stuff. So now I think it's something on server side. But don't know what it is.
UPD3: Finally, I've been told that files are converted using FFMPEG to MP3 128bit, then they stop being OK. Now I need to find how should I convert MP3s so they are OK.
It works for me locally, but when uploaded to server, it does not.
It seems that player.duration do not work in IE 11:
https://msdn.microsoft.com/en-us/library/dn254962(v=vs.85).aspx
I've been trying to work on a project to he able to turn loop on and off for the MP3 playing on a we page. I was using <embed> and tried changing the loop= property using a javascript getElementByID, but while the image swap would work, the song would still stay on the mode it was on at page load.
Someone else used the idea to use the <audio> tag, and made a togglefor loop=, and said it worked. I tried, and would not work. I went and tried on an example site, and it worked for OGG, but not MP3.
I researched it, and the only thing I could find was that Firefox didn't originally support MP3s due to LAME copyrights/patents, but started supporting the MP3 format in version 9.
What's even stranger, is that sometimes the player controls show up, sometimes they don't. I have random other information show up on the page on load, so can't say if it's random when it shows up, or related: but even when the controls load, the play button never works, and it doesn't start on autoplay. However, in Chrome, it loads up fine.
So to condense, when in IE, it loads the text to say it's not compatible with my browser, meaning I can have an <embed> for if it doesn't work: I just tried it.
Firefox, on the other hand, acts like it WILL load it, and doesn't show the alt text.
I read about some people having trouble with OGGs, talking about a MAME type, but I don't really know anything about that stuff, yet...
I'd really like some ideas on what to do about this, because it doesn't ever even show the text to say it's not supported, it's like nothing's there in FF/CB, and MP3s SHOULD be supported for the past 4 full versions, which I'm assuming is why it doesn't say it's not supported.
Firefox doesn't support MP3 in <audio>, precisely because it's still patented... I have no idea what made you think it's supported in Firefox 9.
I have a question about the tag in Safari. I have a page with many audio players on it and have set preload="none" so that page loads faster. In all other browsers, there is no text inside the player, but Safari (5.1.7, Mac) shows the text "Loading..." in the player. I personally don't mind it, but I know it will confuse users who think they should be waiting for something to download and may never click the play button.
Is there a way to set that text to something else, or even better, hide it completely?
Any help is appreciated!
Thanks,
Brett
As far as I know, this is something that Safari does by default and can't be changed. However, you could use some sort of jQuery HTML5 player and add a function to display the "loading" text only when the audio is buffering.