I am using the p5.sound library to create an audio visualiser. This works perfectly, however I would like to be able to keep this functionality without the song actually playing.
The waveform and spectrum are both based off of the volume, so setting that to zero means that the whole thing just displays no sound. Is there a way to mute the tab using javascript, or stop the noise from actually playing, just keep it being read by the .waveform and .analyse functions?
Code: https://www.openprocessing.org/sketch/523860#code
I faced the same need, and actually solved with no code, simply muting the tab in the browser.
--> To mute a browser tab in Firefox, right-click the tab and select “Mute Tab”
Related
I am attaching a screenshot for reference to get more elaborated idea about the problem am facing.. Kind of hell.
I am well aware about autoplay policy and have gone through possible approches which involves user interaction. Also, am not a fond of displaying any screen or button to user to make him click, never, i do not want that.
I am developing a wordpress plugin and having microphone feature which can attach to textbpx on any wordpress website, user clicks on it (user interaction) comes in.
I have also read that i need to resume suspended audio context, which am doing and as you can see in screenshot the state of audio context "running" before and after audio elements play mathod.
I am using audio element created using Audio() constructor.
Note: screenshot is a photo of mac system, I am debugging iphone xr using usb cable.
Can somebody help me out or enlighten me on what am doing wrong or there is any technical limitation.
Sigh! after a week lasted hell finally I managed to make things works.
To give an overview of solution let me first describe high level rough idea of work flow which has problem on iOS Sfari.
Problematic workflow
clickHandler --> AudioContext creation --> Playing audio using audio element.
All the audios followed by this workflow miserably failed in 'play' promise.
Solution which worked for me
clickHandler --> Play audio using audio element -> AudioContext creation --> Playing audio using audio element.
The point of interest in a solution which worked for me is you have to play audio using audio element as first line of code in 'clickHandler'. No doubt the promise still fails but subsequent audios does play.
Also, I was creating new audio element for each new audio source to be played, Which was wrong as auto-play policy imposed on 'per-element' basis. So instead of creating new audio element for each source I just create it once on page load (or whatever suits for you as one time creation) and whenever I want to play different audio file I just change the '.src' property/attribute.
So this is how It worked for me. I must mention throughout the week lasted hell, previously answered questions here and their problem specific solutions have been guiding light which gave me new perspective in a hunt for solution. Also the articles on internet, webkit , chrome, apple's documentation on Auto play policy helped a lot.
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 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?
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).
How can I get the current playing time from an embedded video on a webpage? Is there simply an attribute that can be obtained using JavaScript from one of the common embedded video players? Or do I need to do a work-around like make my own pause and play buttons and keep track of time manually while feeding the play/pause commands to the video using JavaScript? The latter is much more ugly in my opinion. Other solutions?
The html5 video tag provides some decent support for this kind of thing.
The following page gives some decent ideas:
http://www.broken-links.com/2009/10/06/building-html5-video-controls-with-javascript/