I am using the HTML5 tag to play audio files. My problem is that there is an audible gap when a track has finished playing, before the next one starts. This isn't a big deal with most pop music, but for opera it can be very distracting. Any tips on how to avoid this? I'm willing to completely re-write this part of my app.
https://github.com/EricTerrell/ebt-music-manager/blob/main/src/play.js
https://www.ericbt.com/ebt-music-manager
This is an Electron app, so any solution that works in Chrome would probably work for me.
Thanks in advance!
Eric Bergman-Terrell
https://www.ericbt.com
Related
I previously had HTML5 audio playlists working in iOS, even when the screen was locked. This was achieved using the solution suggested here: swapping out the the src when the ended event was triggered.
Can HTML5 in the browser play continuous audio on iOS lock screen?
Now on iOS15 this seems to have stopped working and so playlists reach the end of the first track and the next one never starts.
Has anyone experienced this too? Anyone know a solution? This makes my website basically broken for people who want to listen to audio playlists while the phone is locked.
Met same problem.
It seems like safari on iOS 15 locked audio element when src changes, which won't happen on iOS 14 and before.
You can try to use howler.js to partially solve this problem. This library creates 5 or more audio elements when user interacts, but it will still encounter the same problem when pre-created audio elements is depleted in the background.
I've been trying to replicate this effect apple has on their website. I have been able to do the stop & start effectively on scroll but the reverse playback is an issue.
I've searched and old solutions on the website point to a reverse video which i've done but given that apple has done it for both ipad air and mac pro, I am sure there is a new solution.
Do let me know if you have been able to figure it out. I checked the website, they only use one video.
Thank you so much.
Apple reference
Neat. So they have one big video file (named 'story.mp4') which contains all the transitions. Then have code that can ask the video to play from one point in the file to another point, rather than playing from start straight through to finish.
But you've figured out that much and you want to know how to play parts of the video in reverse? Perhaps this question and answer will help: Is it possible to play HTML5 video in reverse? According to that, it comes down to setting the media element's playbackRate to -1.
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
So I'm trying to play music on a webpage, but whenever it plays for the first time, you have to go through a short but annoying process of enabling quicktime for the website.
Is there either:
Another way to play music (a different music player) that can still be invisible and plays immediately?
A way to force enable quicktime when they get to the site?
So yeah, please help me out!
What I did was I just embedded an invisible youtube player. Works decently.
I'm setting up a website which ultimately displays videos. The video files are all .mpg and requirements prevent me from converting these to another format such as flv. So far I have been playing around with Windows Media Player but have found that it doesn't play nice with non IE browsers. The problem which arises is that although the video will play, it doesn't shrink itself to fit in the WMP container and so only the top corner is visible. This problem goes away if I download the np-mswmp plugin for Firefox however it is a manual install and I'd rather not leave it to the user. Once the Firefox plugin is installed, Chrome also plays the files correctly but I doubt that the average user would ever think to do this.
Is there a better way to embed .mpg files into a web page, an alternative player which doesn't require file conversion? I have had a play with Quicktime but it only ever shows a Q with a question mark imposed over it, even when I associate Quicktime with .mpeg files. Any advice would be appreciated!
Thanks,
James
I'm sorry to say there isn't a good way to do cross-browser video without being able to force your users to install something. That is why every video site uses flash, since it's the nearest thing to a standard - but of course flash has some gaps in coverage, the most significant being iPhones.
Windows Media Player has only about 70% penetration and Internet Explorer somewhat less. By going this route you will end up with 1 in 3 users unable to view your videos.
Either bite the bullet and move to Flash as a video player or just give your users a download link. A download link is a very easy way to support almost every user, if you can do that.