I'm trying to play MP3 or Ogg file, I create auto element (without appending it to DOM)
var $audio = $('<audio>', {preload: 'auto'}),
audio = $audio.get(0)
audio.src = "url/of/ogg/mp3 file"
audio.play()
Audio is not playing on iPad (it plays on desktop however)
If it's the same issue as with Video and I heavily think so:
The problem is, that on mobile iOS devices, Steve Jobs wants you to press play, before a video or audio file is loading. That stops kids from loading huge videos mobile without their explicit permission.
This is a business decicion of Apple. There are currently no workarounds the community is aware of.
Found another SO source:
Duplicate Question
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 am using JWPlayer for a long time but have a problem with playlist not auto loading next tracks in iPhones. I have JWPlayer version 6 loaded with an rss playlist of MP3 files. If the user has the browser open the next track loads and starts playing. If the phone is locked it does not start playing the next track automatically for some reason.
Website: gurbanivichar.com
I would appreciate if someone can help.
Update
I have asked JWPlayer support for help but it seems like they are not able to replicate the issue for some reason. I on the other hand have this issue on iPhone 4s/5/6s/7 and iPad, other iPhones I have not tried.
JWPlayer support thread: https://support.jwplayer.com/customer/en/portal/questions/16729726-mp3-playlist-auto-play-next-tracks-in-iphone?new=16729726
If you can help be reproducing the issue, would be appreciated.
I investigated this issue thoroughly and found that this because of iPhone/iPad limitation that apple has put in. The limitation stops audio/video to autoplay without any interaction. The initial trigger has to come from the user.
So due to this, I have decided to allow users to download an m3u playlist to play on an audio player on the device such as Remote Media Manager, it allows an M3U from any URL to stream music from the web.
Thanks for your help.
I'm looking for a way to multitrack a video with a bunch of sounds.
IOS prevent multiple audio and video to play at the same time.
I found a way on IOS, to launch a sound and an audio by putting the video.play() command in a setTimout (500ms). But this don't works every time, and the medias are not sync. This is not code consistent and maybe apple will correct this on breach on next version of iOS
MediaGroup and MediaController seem supported on iOS but not work properly.
AudioTrack was implemented on some navigators and seem to be removed
What is the alternative?
I've already tried those:
//gingertech.net/2011/05/01/html5-multi-track-audio-or-video/
//blog.denivip.ru/index.php/2013/10/alternative-audio-tracks-in-html5-video/?lang=en
//ldki.blogspot.ca/2012/11/15-html5-video-player-sync-second-audio.html
I have web application(similar to Karaoke) where user can record his voice over instrumental.
After recording user plays back recording. Here I play instrumental in <audio> tag and voice using web audio api. To sync both audios on play/pause I calculate time like this
pausedAt = Date.now() - startedAt;
startedAt = Date.now() - pausedAt;
This works fine. Issue is when user uses slider on audio tag to move forward/backward. I am thinking of solution like this
Use ontimeupdate event, stop the voice and then use startAt(currentTime) where currentTime is of instrumental playing in audio tag.
Since there is no seekTo function in api, I have to stop and then start audio. Is there any better solution for this?
Second issue I face is seeking on audio tag is not smooth. If I arbitrarily clicks on progress bar sometimes it doesn't work. When I saw network tab in developer tool window I saw something like shown in image. It sends out some 600 requests and some 86 MB data downloaded whereas file size is less than 10 MB.
You really should use the Web Audio API to do this. will never give you precise synchronization, and it will rely on streaming to seek - which is going to result in extra downloading, as you saw. Just load the song via XHR and decodeAudioData, and provide your own playback controls.
I need a front-end solution to record audio, but as users do not always use the most modern browsers, flash fall back is necessary. I am looking for an auto-fallback library (such as html5/flash player) to let users record their voices online.
I searched around Google but can't find a satisfying one. Any recommendation?
Thank you so much
Audior is a flash based solution that can record raw audio from your mic, convert it to mp3, give you the mp3 file or upload it to the web server. It keeps the audio in RAM until it's uploaded or saved on your computer so it's not suitable for long recordings where you will loose the data if your browser crashes.
FLVAR is a different flash based solution that, as you record, streams the recorded audio to a media server (Wowza, Adobe Media Server or Red5) where it is saved in .flv files. The codecs used are those native to Flash Player: Speex or NellyMoser's ASAO. Because the data is streamed as it's recorded, FLVAR is well suited for longer recordings.
HTML Media Capture can be used as a fallback on mobile devices. It works by extending the <input > HTML tag with a new capture attribute and you can specify audio or video. When recording the native recording app on the device opens up and the recorded media is attached to the form. It's well supported by all mobile browsers with the exception of audio only recording on Safari for iOS, it only supports audio+video not audio only.
Here's the HTML Media Capture implementation/process for video on iOS. :
The process is similar on Android devices for audio. HTML Media Capture is not supported on any desktop browser.
The only cross browser solution for non Flash audio recording on desktop browsers in the foreseeable future is the MediaStream Recording standard.
MediaStream Recording is a recent proposal by the the Media Capture Task Force for a JS API who's purpose is to make audio and video recording in the browser very simple. It's currently implemented only in Firefox 27 and for audio only. This article covers the standard in more detail.