HTML5 Audio IOS(7) - Javascript Metronome - javascript

I'm creating a simple metronome web app that also displays a random note for training purposes. It works fine on desktop, but on my iPhone (IOS7) there seems to be an issue with the multiple audio elements I'm using.
I'm using one sound for the first accented beat of the measure, and then a different sound for the rest of the beats. The two audio elements look like this:
<div id="audioHide" class="hide">
<audio id="beepOne" src="http://ivandurst.com/metronome/sounds/beat.wav" preload="auto" controls="controls">Your browser is not supported. Get a better standards compliant browser!</audio>
<audio id="beepTwo" src="http://ivandurst.com/metronome/sounds/accent.wav" preload="auto" controls="controls">Your browser is not supported. Get a better standards compliant browser!</audio>
</div>
JSFiddle and Live on my site
When I hit "play" on my iPhone in the jsfiddle, I hear the first sound every first beat, but it doesn't play the second sound for the rest of the beats. Everything else works perfectly. The reason I share both links is because it behaves different in the live environment - Sometimes it only plays the first sound every beat, sometimes it plays both sounds and works properly, and sometimes it says "The operation could not be completed" and/or plays nothing.
I'm not planning on selling this as an app or anything and it doesn't have to be perfectly accurate. I just want to share it as a web app with my friends who are trying to learn the notes on an instrument. Any thoughts on what's wrong here, or ideas for a possible workaround if it's a bug/known issue?

Related

Inconsistent audio playback from audio tag in Safari on laptop

Using React, I'm using JavaScript (play()) to make two audio tags play 2 different .mp3 files (at completely separate times). The .mp3 files are short (less than a second).
import sound1 from 'sound1.mp3';
import sound2 from 'sound2.mp3';
<audio controls muted>
<source src={sound1}></source>
</audio>
<audio controls muted>
<source src={sound2}></source>
</audio>
audio {
display: none;
}
In Safari 13.1.2, on my 13-inch MacBook Catalina, often, one of the sounds plays imperfectly - it's as if the start of the sound isn't heard. Here's a video of me demonstrating what the sound's really like against what it should be like. When the black piece moves, you'll need to turn your volume all the way up to hear a quiet, echoey noise. Then I play you how that file's supposed to sound.
When on my iPhoneX, in Chrome & Safari, the same sound (seemingly) fails to play at all. This may be explained by this SO answer which says that sound won't play unless from a callback from an event handler that involves the user's physical participation e.g. click. This theory fits my case.
My question is similar to this post and this post which got no response. If you think it'd be useful for me to recreate this problem with a Sandbox I could try.
Personal note:
On my 13-inch MacBook Catalina:
on Chrome both sounds work fine.
in Safari, sound2 works imperfectly.
on my IPhoneX:
on Chrome & Safari sound2 is sometimes audible later on.
EDIT:
In this video you can hear me playing back the problematic audio file in Finder. I play it the first time - fine; but the second+ time it makes the same incorrect sound heard in the browser!
Replacing the problematic audio file with a different audio-file brings success - and suggests the problem lies with the audio-file and not my implementation of it in the website. I'm willing to reframe this problem as a poorly performing audio-file but I really don't know. If this were the problem, my only recourse to avoid it would be replaying the audio-file in Finder and making sure it plays a consistent sound.

HTML5 <audio> interrupts mobile music (Spotify,...)

I am developing a website where the landing page shows a video of waves at the beach. The customer then wanted me to implement audio in connection with that screen (some sea sounds).
On my way home listening to music, I checked the site from my mobile device. Everything worked great, but the music I was listening to (from Spotify, but I guess it's the same behaviour with other music apps), stopped.
I consulted Google, but didn't find a solution. Is there a way to prevent that?
Your music was playing by an app in your mobile . But when you open mobile browser , and then go to the website which has a video and sound on the front page . The browser tried to run the video with music . That's why your background app , which was playing music got interrupted as browser was also trying to handle the same audio api .
The same thing happen to me on my android mobile . But the recent chrome update has fixed the issue . But mozila and other browsers are not enabling the background music till.
I have no idea about iphone .
It makes complete sense. I don't know why you would want two sounds to be playing at the same time. That would be noise I guess. I think you don't have a problem, in fact it is best the website audio pauses other audio instances on your device.
I have checked in my iPhone with this website which has audio in it.
https://guccidive.gucci.com/
And also played song in Spotify and Gaana App. But both sounds are playing concurrently. I have iPhone 6s and used Safari browser to check.
And as Limitless Claver said it's correct only that at a time only 1 sound is playing. Since if you hear 2 sounds at the same time it will become noise for the user. And I can bet that user won't like it at all. So it's perfect to pause all other background sounds when a user is surfing your website.
There is nothing you can do for this. Since that's handled by the browser apps itself. There is nothing as of now we can do in our Website to work the way you want.
While Windows 10 for instance allows this to happen (had two youtube tabs running with sound and another application delivering separate audio), I really question whether this is a good idea on a phone where you basically can only have one app open at any time.
It appears that Apple allows for this to happen, but its depending on the app itself, so nothing you can change for anything but your own app, AFAICT.

Multiple video.js players fail on flash fallback

I have the page http://video-stock.co.uk setup with 4 videos, all using video.js. It works fine with chrome etc which use the html5 implementation, but when I view in ie7/8 and the flash fallback, the big video and the first of the small videos are fine, but the other 2 small videos are black, and have no play button overlay, and are unresponsive to clicking, although a right-click does bring up the flash context menu.
I have next to no knowledge of working with flash to play videos, except the odd embed in Wordpress, and I was glad to find Video.js to sort all that out for me. All I can see in the code is that the correct video files seem to be getting sent into flash, but maybe it is because the flash player (.swf) file is being called more than once? Just a novice guess. Any help gratefully received.
Edit, for completeness I set up a test for flash on the page in chrome etc - if you go to http://video-stock.co.uk/?flashdefault you can view the page with all players in flash. It works fine on chrome, ff and even IE7+8. To get the flash default I have used:
_V_.options.techOrder = ["flash", html5, "links"];
I will change the default to that order if I receive no replies from you helpful lot.
After the edit I went to the site in IE without the flashdefault query var and all four players were working.
The only thing I changed was adding preload="auto" to the small videos, and that seems to have been the fix. Although it could have been getting the flash videos into the cache using the flashdefault that fixed it, until some new videos are added we won't find out. To Moderators, should I accept this answer now or wait till I know for sure?

Show controls while HTML5 video is playing

Is there a way to show the controls after a video has started playing. Basically, I'm playing a video with play(), and I want the controls to stay up for a few seconds. Currently (at least on my Android device), the controls fade once the video starts.
Toggling the controls attribute doesn't work, unfortunately.
HTML5 video on Android (iOS too) is not opened inline but in the native player (i.e. outside the browser), so the <video>-tag attributes have no control over what is going to happen in the player.
I don't know if it's possible to "hack" / set-up the native player so I guess you'll have to do research on that. I don't know of any way to remotely influence the behavior of the Android application unfortunately. In case you find out something it would be nice if you could let me know btw.
Also see a recent question of mine (which is rather discouraging unfortunately).

Play more than one song in a web page

I'm working on my HTML and Javascript project and I wanted to add music for the website..
Is there any way I can put more than one song in the code to be played? And is there anyway that the song will continue when openning the next page?
Without using Flash, you are bound to a new HTML5 technique <audio/>, which is supported in Firefox 3.5+, Safari 4+, Chrome 3+, and Opera 10+. Here is an example:
<audio src="path/to/some/audio.file" autoplay>
This is a fall back for old browsers, here you could implement a Flash based audio player
</audio>
I'm not sure if it is possible to continue the song when opening the next page, maybe you could store player data in a cookie.
Here is a similar question with some good answers. The comments in that question list many duplicate questions as well. Many of those answers require HTML5. There are also various Flash-based answers as well.
If you want the song to continue when opening the next page you will need to use frames (easy) or make your website entirely AJAX-driven (more tedious).

Categories