I am developing a mobile web app with HTML5 audio. Much has been said here and on other forums about the fact that you cannot do an auto-play on mobile devices and I worked around that by forcing the user to touch the screen just once to start the app, firing a dummy audio load on that touch, then loading and playing audio files automatically using the src parameter. This works very well and is supported even by IOS7.
An example with short audio files is at test audio. View source to see the rather simple code.
In the actual app, I want to follow this logic but I need to ensure that each audio file is completely loaded before playing it. My question is, is the preload directive issued once when the main audio object is created and thus, applies to all files that are subsequently loaded, or do I have to issue it once for every file loaded. And if the latter, is it before or after the src directive?
myaudio = new Audio();
myaudio.preload='auto';
myaudio.play();
myaudio.pause();
or
myaudio.preload='auto';
myaudio.src = "/js/crow.mp3";
myaudio.play();
or
myaudio.src = "/js/crow.mp3";
myaudio.preload='auto';
myaudio.play();
Thanks for any insight you may lend.
Related
I'm maintaining a legacy ASP/VBScript application for some warehouse scanners. They run Android 7 with Chrome 64. I can configure Chrome however I want so I'm not constrained like a normal website would be. Due to the nature of this web application, playing a sound on page load would improve usability (when the submitted action fails). Is there any way to allow an audio file to play on page load?
I can play sounds easily after a user interaction. However, I've tried multiple methods to play a sound on page load without success:
An <audio> tag with autoplay does not play (<audio autoplay="">).
Play the sound during the load event (Audio.play()). The returned Promise fails with the error:
NotAllowedError: play() can only be initiated by a user gesture.
Create an Audio with autoplay, and append it to body during the load event.
Create an Audio, append it to body, and .play() it during the load event. Yields the same "NotAllowedError".
Whitelisting the website for sounds in Chrome.
Ensuring the media autoplay setting is set to allowed in Chrome.
Both Chrome and Firefox, have dropped support for the autoplay attribute for both audio and video unless it's a video with the sound muted.
You can read more on that here: Autoplay Policy
However, recently I found a workaround using the Howler.js library, and it seems to work quite well in just these lines of code:
let timer, sound;
sound = new Howl({
src: ['<?= get_theme_file_uri() ?>/images/spotAudio.mp3']
});
sound.play();
You can download the library and read the docs here: https://howlerjs.com/
I made a online audio player. its fine but its taking too many time to start playing the audio on slow internet. Is here can i do anything to fix this problem?
can I set any loading time? like at first the audio will load first 10 second. when the first 10 second loaded the player will start plying. while it play first 10 second in that time the player will load next 10 second.? can I do it?
var audio = new Audio();
audio.src ="dir/music.mp3";
audio.loop = true;
audio.autoplay = true;
it is my current code. Please help me. Thanks
I think your best way will be to have a lower quality .mp3 file (192kbps)?
You're never sure the next 10seconds will be loaded once you've played the first 10seconds.
The Browser decides how much he will preload. You could make this like: Force the Browser to Play audio as soon the HTML is fully loaded.
window.onload = function() {
document.getElementById("my_audio").play();
}
But slow connection is not you only enemy. If the Browser/PC is slow it may take longer because it has to load and decoding the audio. Your best bet is to use audio with lower quality. So it can load and process it faster. If you using HTML5 audio tag, make sure to use preload="auto".
<audio preload="auto">
To make advanced audio stuff you had to use low level audio frameworks and so on to have more control over how the things work.
Also .wav is way faster in decoding than .mp3.
I have created code for playing an .mp3 file using JavaScript. But the file is taking to much time to play on Android. I want to play the sound quickly after click on a text image. How do I increase loading speed on Android?
My JavaScript code:
if(window.audio)
{
audio.pause();
}
window.audio = new Audio (audio_path);
window.audio.play();
Check demo here -
http://97.74.195.122/gizmo-demo/canvasslidertwo.php
In the above link, click on the Japanese word for playing sound.
You are actually facing the bug depicted in this question. Which makes chrome browsers redownload the files from an Audio Element each time you change its src property (no-caching).
One solution would be to use the WebAudioAPIand store your audio files in the buffer. Doing so, you should be able to call them with no latency.
You can check the accepted answer for an example on how to deal with it.
Or you could also try not to call a new Audio() on each click, and rather load every audios from your page and only call their play() method on click.
But I'm not sure it would fix your issue.
I want to create an audio file to play in iphone safari browser but without the help of HTML page. Just in Pure javascript or Jquery. Thanks in advance.
var audio = new Audio();
audio.id = "mySong";
audio.src = "//mysite.com/media/mysong.mp3";
Except that you can't autoplay the song in audio. You can't autoload a song on an i___ device. ...so you need to custom-build controls, which you then have to put on an HTML page, with event listeners to listen for clicks or taps, in order to play/pause the song, or change tracks or whatever...
So you still need an HTML page.
Moreover, this will ONLY work in the browser, as there's no other way to get this to function outside of a browser, on an iPhone (not 100% true, but Audio is an HTML5 API, ergo, HTML5 support is required to use that particular API).
I am very new in HTML5 player and need help. I am using the latest mediaelement.js file for the player. I am facing problem in certain cases. I have initialized the player and now want to do some work around :
Initially initialize the HTML5 mediaelement player and load all the controls but not pass the video src
Pass the video src once the live url coming wowza server is available as player.setSrc('url')
Change the video url onclick and the player to restart the video playing for the new src
How to define the provider and netconnectionurl in the player as we can define in flowplayer
Loading of player is not smooth in android tablet and also sometimes browser crashes on fullscreen
I tried to load the player initially without passing the video src but it does not load the controls only shows Download File. This is important for me as the live url comes after a delay from the server and i need to initailize the player before. Changing video url onclick seems to work for browser that supports HTML5 but in browser that uses flash fallback the video src does not change onclick. I have different channels and i want to load the channel url and play the video onclick. I don't want to pass the rtmp url with the stream url. I want to define it in the player from before and if possible change it dynamically. In android dont know why sometimes player does not load properly and browser crashes. Any help would be great.