I am using the tsParticles firework preset but I don't want any sound effects nor the audio controls that appear at the upper-right.
The fireworks preset comes with an option to disable sound, but it does not appear to do anything.
How do I disable the sound effects and hide the audio controls?
Here is what I am doing:
<html>
<body>
<div id="tsparticles"></div>
<script src="https://cdn.jsdelivr.net/npm/tsparticles-preset-fireworks#2/tsparticles.preset.fireworks.bundle.min.js"></script>
<script>
(async () => {
await tsParticles.load("tsparticles", {
sounds: {
enable: false,
},
preset: "fireworks",
});
})();
</script>
</body>
</html>
Related
I am using plyr as wrapper around HTML5 video tag and using Hls.js to stream my .m3u8 video .
I was going around a lot of issues on plyr to enable quality selectors and came arounf multiple PR's which had this question but was closed saying the implementation is merged, till i came around this PR which says it's still open, but there was a custom implementation in the Comments which assured that it works . I was trying that implementation locally in order to check if we can add a quality selector but seems like i am missing something/ or the implementation dosent work .
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HLS Demo</title>
<link rel="stylesheet" href="https://cdn.plyr.io/3.5.10/plyr.css" />
<style>
body {
max-width: 1024px;
}
</style>
</head>
<body>
<video preload="none" id="player" autoplay controls crossorigin></video>
<script src="https://cdn.plyr.io/3.5.10/plyr.js"></script>
<script src="https://cdn.jsdelivr.net/hls.js/latest/hls.js"></script>
<script>
(function () {
var video = document.querySelector('#player');
var playerOptions= {
quality: {
default: '720',
options: ['720']
}
};
var player;
player = new Plyr(video,playerOptions);
if (Hls.isSupported()) {
var hls = new Hls();
hls.loadSource('https://content.jwplatform.com/manifests/vM7nH0Kl.m3u8');
//hls.loadSource('https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8');
hls.attachMedia(video);
hls.on(Hls.Events.MANIFEST_PARSED,function(event,data) {
// uncomment to see data here
// console.log('levels', hls.levels); we get data here but not able to see in settings .
playerOptions.quality = {
default: hls.levels[hls.levels.length - 1].height,
options: hls.levels.map((level) => level.height),
forced: true,
// Manage quality changes
onChange: (quality) => {
console.log('changes',quality);
hls.levels.forEach((level, levelIndex) => {
if (level.height === quality) {
hls.currentLevel = levelIndex;
}
});
}
};
});
}
// Start HLS load on play event
player.on('play', () => hls.startLoad());
// Handle HLS quality changes
player.on('qualitychange', () => {
console.log('changed');
if (player.currentTime !== 0) {
hls.startLoad();
}
});
})();
</script>
</body>
</html>
The above snippet works please run , but also if you uncomment the
line in HLS Manifest you will see we get data in levels and also pass
the data to player options but it dosent come up in settings.How can
we add a quality selector to plyr when using Hls stream .
I made a lengthy comment about this on github [1].
Working example: https://codepen.io/datlife/pen/dyGoEXo
The main idea to fix this is:
Configure Plyr options properly to allow the switching happen.
Let HLS perform the quality switching, not Plyr. Hence, we only need a single source tag in video tag.
<video>
<source
type="application/x-mpegURL"
<!-- contain all the stream -->
src="https://bitdash-a.akamaihd.net/content/sintel/hls/playlist.m3u8">
</video>
[1] https://github.com/sampotts/plyr/issues/1741#issuecomment-640293554
I'm using videojs plugin latest one 7.6.5 upgraded from 4.*(4.* was working fine).
I have simulated my project working with videojs.
I want to display image or video in the same dialog by changing html content
Question: videojs player is not loading or playing everytime(plays only first time), how to make it to play all the time.
Steps to reproduce my problem:
see below code snippet or go to this codepen link https://codepen.io/eabangalore/pen/PoPwQjZ
wait for 30sec videojs will come for the 1st time correctly in a dialog.
3.dialog will disappear, image will show up.
wait for another 30sec now videojs won't load.
below my code:
function initializePlayer(){
var player = videojs('vplayer', {inactivityTimeout: 0});
player.ready(function() {
player.src({
src: "https://vjs.zencdn.net/v/oceans.webm",
type: "video/webm"
});
});
}
var showCloseNum = 0;
var intId = setInterval(function(){
showCloseNum++;
$('#videojs_player_dialog').dialog({
modal: true,
resizable: false,
autoOpen: false,
width: 600,
height: 350,
open: function(){
var player = `
<video disablepictureinpicture="" autoplay controlslist="nodownload" id="vplayer" class="video-js vjs-default-skin" controls muted data-setup='{ "inactivityTimeout": 0}' style="width:600;height:350;">
<source src="#"></source>
</video>
`;
var image = '<img src="https://via.placeholder.com/468x60?text=Visit+Blogging.com+NoC/O https://placeholder.com/">';
if(showCloseNum % 2 == 0){
$('#videojs_player_dialog').html(player);
initializePlayer();
}else{
$('#videojs_player_dialog').html(image);
}
},
beforeClose: function () {
$('#videojs_player_dialog').html('');
$(this).dialog('destroy');
}
});
if(showCloseNum % 2 == 0){
$('#videojs_player_dialog').dialog('open');
}else{
$('#videojs_player_dialog').dialog('close');
}
},6000);
video{
width: 100%;
height:100%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/video.js/7.6.5/video.min.js"></script>
<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.24/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<link href="https://vjs.zencdn.net/7.5.5/video-js.css" rel="stylesheet"/>
<div id="videojs_player_dialog">
</div>
You need to dispose of the player rather than just removing its elements, otherwise you can't initialise a other player with the same id.
videojs.getPlayer('vplayer').dispose()
I have looked at other answers to similar questions, and unfortunately, I can't seem to figure out what I need to change in my code.
Here is the component I made to handle the sound:
// https://glitch.com/edit/#!/smiling-armchair
AFRAME.registerComponent('soccer-audiohandler', {
init:function() {
let playing = false;
var el = this.el;
let audioEl = document.querySelector("a-sound");
audioEl.setAttribute("src", "#soccer-game");
audioEl.addEventListener("loaded", (e) => {
console.log("AUDIO LOADED")
console.log(e)
var audio = audioEl.components.sound;
el.addEventListener('click', (ee) => {
console.log(ee)
if(!playing){
audio.playSound();
} else {
audio.stopSound();
}
playing = !playing;
});
})
}
})
Here is the scene where the component is rendered
<!DOCTYPE html>
<html>
<head>
<script src="https://aframe.io/releases/0.7.0/aframe.min.js"></script>
<script src="https://unpkg.com/aframe-environment-component#1.0.0/dist/aframe-environment-component.min.js"></script>
<script src="https://npmcdn.com/aframe-animation-component#3.0.1"></script>
<script src="https://npmcdn.com/aframe-event-set-component#3.0.1"></script>
<script src="https://npmcdn.com/aframe-layout-component#3.0.1"></script>
<script src="https://npmcdn.com/aframe-template-component#3.1.1"></script>
<script src="component/soccer-audiohandler.js"></script>
</head>
<body>
<!-- Try changing the preset to one of default, contact, egypt, checkerboard, forest, goaland, yavapai, goldmine,
threetowers, poison, arches, tron, japan, dream, volcano, starry, osiris. -->
<!-- See more environment options: https://github.com/feiss/aframe-environment-component#parameters -->
<a-scene cursor="rayOrigin:mouse" environment ="preset:goaland" >
<a-assets>
<a-sound src="some/path/here" id="soccer-game"></a-sound>
</a-assets>
<!--https://github.com/aframevr/aframe/blob/master/docs/components/geometry.md-->
<!--https://github.com/aframevr/aframe/blob/master/docs/components/sound.md-->
<a-text font="kelsonsans" value="click to play sound" width="8" position="0 2.25 -5" rotation="0 15 0"></a-text>
<a-sound geometry="primitive:box; width: 1; height: 1; depth: 1;"
position="1 1 -5"
autoplay="false"
soccer-audiohandler src='#soccer-game'></a-sound>
</a-scene>
</body>
</html>
I know the problem is not the path because the audio plays fine when I load it in a 360-degree image gallery, but it does not load in the scene above. I have tried using .wav files and .ogg files. I also tried shortening the audio since the original is rather long. Anyone have any suggestions on how I can remedy this?
You should use <audio> instead of <a-sound> in the <a-assets>, as described here.
working fiddle here.
On my server I use Audiowaveform to generate JSON data from my audio files.
On frontend I use Wavesurfer-JS to draw the waveform based on previous JSON data.
The problem is that on page ready the Wavesurfer-JS download on background the audio file all the time (and not only when the user hit the play button).
This is my try.
This is the salient part:
<div id="waveform">
<audio id="song" style="display: none" preload="false" src="http://api.soundcloud.com/tracks/45398925/stream?client_id=fa791b761f68cafa375ab5f7ea51927a"></audio>
</div>
<script>
var wavesurfer = WaveSurfer.create({
container: '#waveform',
waveColor: 'grey',
backend: 'MediaElement',
mediaType:'audio',
progressColor: 'red',
cursorColor: '#fff',
normalize: true,
barWidth: 3
});
wavesurfer.load(document.querySelector('#song'), ['.$json.']);
</script>
So basically I need to focus on wavesurfer.load and add a new function to this Javascript to only draw from peaks(JSON data) the waveform and don't download audio file on page load but only when the user hit the play button.
How can I achieve it?
Took me a while to hack around the wavesurfer js code to find out how I can make it draw without loading the song already :P
Setting the peaks in the backend variable and calling drawBuffer did the trick, combining that with some play button logic and we get the following code:
//Create new wavesurfer
wavesurfer = WaveSurfer.create({
container: '#waveform',
backend: 'MediaElement',
mediaType:'audio',
normalize: true,
barWidth: 3
});
//Set song
wavesurfer.song = "http://www.stephaniequinn.com/Music/Allegro%20from%20Duet%20in%20C%20Major.mp3"
//Set peaks
wavesurfer.backend.peaks = [0.0218, 0.0183, 0.0165, 0.0198, 0.2137, 0.2888, 0.2313, 0.15, 0.2542, 0.2538, 0.2358, 0.1195, 0.1591, 0.2599, 0.2742, 0.1447, 0.2328, 0.1878, 0.1988, 0.1645, 0.1218, 0.2005, 0.2828, 0.2051, 0.1664, 0.1181, 0.1621, 0.2966, 0.189, 0.246, 0.2445, 0.1621, 0.1618, 0.189, 0.2354, 0.1561, 0.1638, 0.2799, 0.0923, 0.1659, 0.1675, 0.1268, 0.0984, 0.0997, 0.1248, 0.1495, 0.1431, 0.1236, 0.1755, 0.1183, 0.1349, 0.1018, 0.1109, 0.1833, 0.1813, 0.1422, 0.0961, 0.1191, 0.0791, 0.0631, 0.0315, 0.0157, 0.0166, 0.0108];
//Draw peaks
wavesurfer.drawBuffer();
//Variable to check if song is loaded
wavesurfer.loaded = false;
//Load song when play is pressed
wavesurfer.on("play", function () {
if(!wavesurfer.loaded) {
wavesurfer.load(wavesurfer.song, wavesurfer.backend.peaks);
}
});
//Start playing after song is loaded
wavesurfer.on("ready", function () {
if(!wavesurfer.loaded) {
wavesurfer.loaded = true;
wavesurfer.play();
}
});
Make sure to remove the unnecessary<audio> tag from the html, browsers seem to download all audio files in those tags on load and attributes like preload=false seem to be ignored...
I'm coding like this for HTML5, and it's working fine.
<video id="video" controls="controls" autoplay="autoplay" name="media"><source src="http://media.w3.org/2010/05/sintel/trailer.mp4" type="video/mp4"></video>
<button onclick="document.getElementById('video').playbackRate+=0.1">playbackRate+=0.1</button>
<button onclick="document.getElementById('video').playbackRate-=0.1">playbackRate-=0.1</button><br>
for JWplayer, how can I speed down/up playback speed just like above?
<script type="text/javascript">
jwplayer("myElement").setup({
file: "http://media.w3.org/2010/05/sintel/trailer.mp4",
title: "test",
height: 400,
width: 600,
autostart: true,
autoplay: true,
});
jwplayer("myElement").onTime(function(time){
showComments(Math.round(time.position));
})
</script>
As described in this post JW Player support control over playback speed only when it is in html5 render mode and it that case you can control it through options of the video tag it renders. It would look like this:
<script type="text/javascript">
function changePlaybackRate(rateChange) {
if (jwplayer().getRenderingMode() == "html5") {
var videoTag = document.querySelector('video');
if (videoTag.playbackRate) {
videoTag.playbackRate += rateChange;
}
}
//Small hack to work around a Firefox bug
if(navigator.userAgent.toLowerCase().indexOf('firefox') > -1) {
jwplayer().seek(jwplayer().getPosition());
}
};
</script>
<button onclick="changePlaybackRate(0.1)">playbackRate+=0.1</button>
<button onclick="changePlaybackRate(-0.1)">playbackRate-=0.1</button>
There is not support in JW Player for playback speed control when the browser doesn't support it nativly through HTML5 (for example in case of using Flash player)