Volume slider added to howler.js restarts stopped audio when adjusted - javascript

Issue: the volume slider restarts playback after it's been started at least once. This is mostly working as intended except for the volume slider. After 'Play' is run and the audio plays, click 'Stop'. Now drag the volume slider. The audio starts to play again when it shouldn't. I'm a JS newbie and hopefully it's just a syntax issue. Thoughts? Thanks in advance!
var sound01 = new Howl({
src: ['https://viewescape.com/audio/3secLoop_n.wav'],
volume: 0.2,
loop: true,
});
function playAudio() {
if(play.innerHTML=="Play")
{
sound01.volume(0.2);
sound01.stop();
sound01.play();
sound01.fade(0, sound01.volume(), 500);
play.innerHTML="Stop";
}
else{
sound01.fade(sound01.volume(), 0, 500);
play.innerHTML="Play";
sound01.once('fade', function(){
sound01.stop;
});
}
}
function showValue(newValue) {
document.getElementById('rangeAudio').innerHTML=newValue;
sound01.volume(newValue);
}
<script src="https://viewescape.com/test_howler/dist/howler.js"></script>
<html>
<head>
<title>Howler test drive</title>
<meta charset="UTF-8">
</head>
<body>
<button id="play" onclick="playAudio();">Play</button><br>
<input type="range" min="0" max="1" value="0.2" step="0.05" onchange="showValue(this.value)" oninput="showValue(this.value)"/>
<input type="hidden" id="rangeAudio" value="0.2"><br>
</body>
</html>

Related

Random Audio on Submit Button Click (JS)

I want to create a submit button, when every time you click it, it plays a random audio file.
Is there a fast way to do this with HTML/JS?
<!doctype html>
<html>
<head>
<title>PlayAudio</title>
</head>
<body>
<script>
function playAudio() {
var audio = document.getElementById("MySound");
audio.play();
}
</script>
<input type="button" value="Play Audio" onclick="playAudio()">
<audio id="MySound" src="https://interactive-examples.mdn.mozilla.net/media/cc0-audio/t-rex-roar.mp3"></audio>
</body>
</html>
Suppose you have a project with files like this:
Project files
Then you can do in your HTML & JS code like this to make the sound played randomly when the submit button is clicked:
//Load the sound files into an array
const audioArr = [
new Audio('audio/audio1.ogg'),
new Audio('audio/audio2.ogg'),
new Audio('audio/audio3.ogg'),
new Audio('audio/audio4.ogg'),
new Audio('audio/audio5.ogg'),
new Audio('audio/audio6.ogg')
];
function playRandomAudio(){
//Get a random index of the sound to be played
const randomAudioIndex = Math.floor(Math.random() * (audioArr.length+1));
//Play the selected sound
audioArr[randomAudioIndex].play();
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Test</title>
</head>
<body>
<input type="submit" value="Submit" onclick="playRandomAudio()">
<script src="test_sound.js"></script>
</body>
</html>
Hope this answers your question. 🙏

Ionic 3: How to get keydown/keypress events on external keyboard at any time

So, i have a barcode scanner, connected by microsub (otg), and it's recognized as an external keyboard. What i need to do is to catch any keydown or keypress event at any time (not just on focus on input). Also, it would be great to know if the evvent was fired by the virtual keyboard or the physical one.
Any ideas?
hi jonyjm Bellow is the scanner example with cdn link
1 Scann with focus scannerInput text box or type here
That will display in top text box for example
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<input id="userInput" type="text" autofocus />
<br>
<div class="test">
<input id="scannerInput" type="text" value="barcodescan" autofocus />
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/scannerdetection/1.2.0/jquery.scannerdetection.compatibility.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/scannerdetection/1.2.0/jquery.scannerdetection.min.js"></script>
<script>
$(document).ready(function () {
$(document).scannerDetection({
//https://github.com/kabachello/jQuery-Scanner-Detection
timeBeforeScanTest: 200, // wait for the next character for upto 200ms
avgTimeByChar: 40, // it's not a barcode if a character takes longer than 100ms
preventDefault: true,
endChar: [13],
onComplete: function (barcode, qty) {
validScan = true;
$('#scannerInput').val(barcode);
} // main callback function ,
,
onError: function (string, qty) {
$('#userInput').val($('#userInput').val() + string);
}
});
});
</script>
</body>
</html>

Audio Volume Slider

I need some help, I don't if im over complicating things but I basically have a music player im working on that has 2 tracks. and i have a volume slider im using. when i slide my slider the volume will change they way it should. but when i click on next for the next track to load the volume resets on the music player, . but my slider value stays the same and if i slide my volume afterwords it will update. how can i get the music player to automatically set its volume to my slider values from start when I click on next.
if this sound confusing i put all my code on here so you can check it out. theirs two players for each track so u can see what im talking about. basically if my silder is moved to 0 meaning no sound. each track should be on 0. so if click next, that track should be set to 0 automatically once its loaded.
<!DOCTYPE html>
<html lang ="en">
<head>
<meta charset="UTF-8">
<title> My audio test</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<script type="text/javascript" src="js/jquery11.js"></script>
<script>
jQuery(document).ready(function(){
i=0;
nowPlaying = document.getElementsByClassName('playsong');
nowPlaying[i].load();
volume =($(this).val(.3));
callMeta();
$('.play').on('click', function() {
nowPlaying[i].play();
callMeta();
});
$('.stop').on('click', function() {
nowPlaying[i].pause();
callMeta();
});
$('.next').on('click', function() {
$.each($('audio.playsong'), function() {
this.pause();
});
++i;
nowPlaying[i].load();
nowPlaying[i].volume;
nowPlaying[i].play();
callMeta();
});
$('.prev').on('click', function() {
$.each($('audio.playsong'), function() {
this.pause();
});
--i;
nowPlaying[i].load();
nowPlaying[i].play();
callMeta();
});
function callMeta() {
var trackTitle = $(nowPlaying[i]).attr('data-songtitle');
$('.songtitle').html(trackTitle);
var trackArtist = $(nowPlaying[i]).attr('data-songartist');
$('.songartist').html(trackArtist);
var albumart = $(nowPlaying[i]).attr('data-albumart');
$('img.albumart').attr('src', albumart);
}
$("input[type=range]").val($(this).val()); // set value to 6
$('#volume-bar').change(function(evt) {
nowPlaying[i].volume =($(this).val()/100);
$('#newValue').html(nowPlaying[i].volume);
});
})
</script>
</head>
<body>
<audio class="playsong" controls="controls" data-songtitle="love and fluff" data-songartist="nelly" data-albumart= "img/0qXrGPz.jpg" src="Andy Mineo.mp3">
Your browser does not support html audio tag
</audio>
<audio class="playsong" controls="controls" data-songtitle="food for fat kids" data-songartist="chubby" data-albumart= "img/Lecrae_1600x16002-400x400.jpg" src="Derek Minor.mp3">
Your browser does not support html audio tag
</audio>
<img class="albumart" src="img/Aunrey-avatar.jpeg"></img>
<div class="songartist">song title goes here</div>
<div class="songtitle">song title goes here</div>
<div class="play">Play</div>
<div class="stop">Stop</div>
<div class="next">Next</div>
<div class="prev">Prev</div>
<div class="volume">Volume</div>
<input type="range" id="volume-bar" min="0" max="100" step="0.1" value="100">
<div id="newValue" value="0">0</div>
</body>
</html>
Perhaps the only thing needed is to apply the volume - that was already set - to the new called song, take a look in the changes:
$('.next').on('click', function() {
$.each($('audio.playsong'), function() {
this.pause();
});
++i;
nowPlaying[i].load();
nowPlaying[i].volume =($("#volume-bar").val()/100); //changed line
nowPlaying[i].play();
callMeta();
});
$('.prev').on('click', function() {
$.each($('audio.playsong'), function() {
this.pause();
});
--i;
nowPlaying[i].load();
nowPlaying[i].volume =($("#volume-bar").val()/100); //added line
nowPlaying[i].play();
callMeta();
});

JQuery slideshow, progressbar and events not unregistering

I'm having a hard time figuring out my problem.
It seems like the jquery off method is not working.
Here is what i am trying to do. I'm using a plugin called Slideshowify to create a slideshow with a ken burns effect and a jquery progress bar to show for how long each images will be shown on screen.
The problem is that the plugin doesn't handle the window resize. So what I am trying to achieve is to register to the window resize event and reset the plugin when the window is resized.
To start and restart my progress bar I'm using 2 events, one before the image is shown, one after it's being hidden. All works fine, but the problem is that the off method doesn't seem to unregister the events.
So if you resize the window multiple times, many events will be registered and fired and the progress bar will reset when it's not suppose to.
Here's the code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Test</title>
<link href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<script src="~/Scripts/jquery.transit.min.js"></script>
<script src="~/Scripts/jquery.slideshowify.js"></script>
<script type="text/javascript">
function startSlideShow()
{
$("body").off(); //unregister the events
$("div[id^='slideshowify']").remove(); //remove the div that the plugin created
$("#slideshow img").slideshowify();
$("body").on("beforeFadeIn", onBeforeFadeIn); //event fired before an image is shown
$("body").on("beforeFadeOut", onBeforeFadeOut); //event fired before an image is hidden
}
function onBeforeFadeIn(e, img)
{
startProgress();
}
function onBeforeFadeOut(e, img)
{
startProgress();
}
function startProgress()
{
$("#progressbar .ui-progressbar-value").stop(true, true); //stop the progress animation
$("#progressbar").progressbar({ value: 0.1 }); //create/reset the progress bar
$("#progressbar .ui-progressbar-value").animate({ width: "100%" }, 9000); //start the progress animation
}
function onWindowResize()
{
startSlideShow();
startProgress();
}
$(document).ready(function ()
{
startSlideShow();
$(window).resize(onWindowResize); //event fired when the window is resized
});
</script>
</head>
<body>
<div id="slideshow">
<img src="http://www.narcissusphoto.com/weddings//mariage_20130810_0001.jpg" />
<img src="http://www.narcissusphoto.com/weddings//mariage_20130810_0002.jpg" />
<img src="http://www.narcissusphoto.com/weddings//mariage_20130810_0003.jpg" />
<img src="http://www.narcissusphoto.com/weddings//mariage_20130810_0004.jpg" />
<img src="http://www.narcissusphoto.com/weddings//mariage_20130810_0006.jpg" />
<img src="http://www.narcissusphoto.com/weddings//mariage_20130810_0012.jpg" />
<img src="http://www.narcissusphoto.com/weddings//mariage_20130810_0014.jpg" />
<img src="http://www.narcissusphoto.com/weddings//mariage_20130810_0016.jpg" />
</div>
<div id="progressbar" style="height:20px; width:100%;"></div>
</body>
</html>
When you resize the window, jQuery is going to call the .resize() function many times in that one "resizing".
Fiddle that console logs the resize events
The .off() method is probably working but you're expecting that
$(window).resize(onWindowResize);
is only firing once when you are done resizing the window. That's not the case. It seems that you need to use a timeout to achieve what you want.
Using Timeout
$(window).bind('resize', function(e)
{
window.resizeEvt;
$(window).resize(function()
{
clearTimeout(window.resizeEvt);
window.resizeEvt = setTimeout(function()
{
//code to do after window is resized
}, 250);
});
});

html5 video and javascript combination fails

I am working on a HTML5 video functionality and I have a question in SO asking the approach to be followed.
Found some semi-helping articles on w3.org website but found a completely working example on jsfiddle.net
Please follow the link here
I am trying the same as follows in my local machine -
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery Mobile Web App</title>
<link href="jquery-mobile/jquery.mobile-1.0.min.css" rel="stylesheet" type="text/css"/>
<script src="jquery-mobile/jquery-1.6.4.min.js" type="text/javascript"></script>
<script src="jquery-mobile/jquery.mobile-1.0.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(e) {
var video = document.getElementById('video').play();
var intervalRewind;
$(video).on('play', function () {
video.playbackRate = 1.0;
clearInterval(intervalRewind);
});
$(video).on('pause', function () {
video.playbackRate = 1.0;
clearInterval(intervalRewind);
});
$("#speed").click(function () { // button function for 3x fast speed forward
video.playbackRate = 3.0;
});
$("#negative").click(function () { // button function for rewind
intervalRewind = setInterval(function () {
video.playbackRate = 1.0;
if (video.currentTime == 0) {
clearInterval(intervalRewind);
video.pause();
} else {
video.currentTime += -.1;
}
}, 30);
});
});
</script>
</head>
<body>
<div data-role="page" id="page">
<div data-role="header">
<h1>Page One</h1>
</div>
<div data-role="content">
<video id="video" controls>
<source src="http://www.quirksmode.org/html5/videos/big_buck_bunny.mp4" type="video/mp4">
<source src="http://www.quirksmode.org/html5/videos/big_buck_bunny.webm" type="video/webm">
<source src="http://www.quirksmode.org/html5/videos/big_buck_bunny.ogv" type="video/ogg">
</video>
<button id="speed">Fast Forward</button>
<button id="negative">Rewind</button>
</div>
<div data-role="footer">
<h4>Page Footer</h4>
</div>
</div>
</body>
</html>
I am not able to find out why and where this script is failing. Is jquerymobile a problem?
Expected: Both Forward and Reverse functionalities should work.
Actual: None of the two buttons are working.
Any help is very much appreciated.
Thanks in advance.
You script worked (more or less), all it took to make it work was to comment out setting playback rate on play event. It was interfering with setting playback rate after clicking fast-forward. Working example here http://jsfiddle.net/h9EVQ/32/
As to the script itself, you should realize, that your rewind implementation has some flaws. One of them is that video is actually paused the whole time, so user can't just press pause to stop rewinding. But that would be easily solvable. The other, bigger issue is, that while doing a rewind you hop back in time by .1 fraction. That may or may be not an issue for some setups/movies. For those shorter movies your rewind function might be to speedy.

Categories