I have tried using:
createjs.Sound.pause;
mySound.stop();
Nothing works. Right now it have a stop button but if the stop button is pressed then the sound would not be played again.
This is the soundjs that im using. soundjs
My code is exactly the same with the source code of it. Thanks for any help!
I end up doing it like this Based on Stephen Lightcap answer:
Javascript inside the head tag:
function load() {
// Update the UI
document.getElementById("display").innerText = ".";
// Load the sound
createjs.Sound.alternateExtensions = ["mp3"];
createjs.Sound.addEventListener("fileload", handleFileLoad);
createjs.Sound.registerSound({id:"mySound", src:"../../test.mp3"});
}
function handleFileLoad(event) {
// Update the UI
document.getElementById("display").innerHTML = ".";
document.getElementById("stopBtn").disabled = "";
// Play the loaded sound
createjs.Sound.play(event.src,{loop:2});
}
var instance = createjs.Sound.play(event.src);
</script>
Button inside the body tag:
<input id="pausBtn" type="button" value="Pause" onclick="pause()"/>
Javascript for the button onclick. Placed below the button. :
<script>
function pause(){
instance.pause();
}
</script>
But I got an error saying :
Uncaught TypeError: Cannot read property 'pause' of undefined
at pause (phkk.html:560)
at HTMLInputElement.onclick (phkk.html:177)
You can store it in an var and then use the function pause()
var instance = createjs.Sound.play(event.src);
Have button that calls a method that will store the pause
<input id="pausBtn" type="button" value="Pause" onclick="pause()"/>
The JS function:
function pause(){
instance.pause();
}
EDIT
I went over the docs and it appears it doesn't function like that any more, so you're going to have to use the paused property
Here's a rough outline on how it works for me:
<script>
var instance;
function load() {
// Update the UI
document.getElementById("display").innerText = ".";
// Load the sound
createjs.Sound.alternateExtensions = ["mp3"];
createjs.Sound.addEventListener("fileload", handleFileLoad);
createjs.Sound.registerSound({id:"mySound", src:"../../test.mp3"});
}
function handleFileLoad(event) {
// Update the UI
document.getElementById("display").innerHTML = ".";
document.getElementById("stopBtn").disabled = "";
// Play the loaded sound
instance = createjs.Sound.play(event.src,{loop:2});
}
function pause(){
instance.paused ? instance.paused = false : instance.paused = true;
}
</script>
The HTML buttons:
<body>
<input id="loadBtn" type="button" value="Begin Loading" onclick="load()"/>
<input id="stopBtn" type="button" value="Stop Playing" onclick="createjs.Sound.stop();" disabled="disabled" />
<input id="pauseBtn" type="button" value="Pause" onclick="pause()"/>
<label id="display">Waiting for User Input. Click "Begin Loading".</label>
Related
I am creating an Google chrome extension and I am trying to get my stop/stop logging button to work within my function named Logger. When the button is pressed it doesn't react to the function I wrote, Currently it is displaying the stop-button but I want it to display the start-button when clicked. I hope I explained that to some understanding but do anyone possibly know why my function is not working?
Below is my current javascript function and html :
popup.js
//attempt to get start/stop logging buttons to work
function Logger(isLogging, notLogging) {
if (isLogging = true, notLogging = false) {
addRow();
document.getElementById("click-start").style.display = "block";
document.getElementById("click-stop").style.display = "none";
}
if (isLogging = false, notLogging = true) {
document.getElementById("click-start").style.display= "none";
document.getElementById("click-stop").style.display= "block";
}
}
//button to start logging
document.addEventListener('DOMContentLoaded', function() {
document.getElementById("click-start").addEventListener("click", Logger(true, false));
});
//button to stop logging
document.addEventListener('DOMContentLoaded', function() {
document.getElementById("click-stop").addEventListener("click", Logger(false, true));
});
popup.html
<!--Start button of logging-->
<button class="button button1" id="click-start" >
<u> Start Logging </u>
</button>
<!--Stop button of logging-->
<button class="button button2" id="click-stop" >
<u> Stop Logging </u>
</button>
Image of current output--button currently doesnt react
This may help to get the core functionality working, this implementation can be much improved
const btnStart = document.getElementById("click-start");
const btnStop = document.getElementById("click-stop");
//attempt to get start/stop logging buttons to work
function Logger(isLogging) {
console.log(isLogging)
if (isLogging) {
btnStart.style.display = "block";
btnStop.style.display = "none";
}else{
btnStart.style.display = "none";
btnStop.style.display = "block";
}
}
//button to start logging
document.addEventListener("DOMContentLoaded", function () {
btnStart.addEventListener("click", function() {Logger(false)});
btnStop.addEventListener("click", function() {Logger(true)});
});
You have to try to keep the queries to the DOM to a minimum.
Have a look at the toggle method it will help to make your code a bit leaner and easier to maintain
I'm not sure if the Logger function gets executed if you use it like this in the addEventListener.
Maybe you can give it a try like this:
document.addEventListener('DOMContentLoaded', function() {
document.getElementById("click-start").addEventListener("click", function () {
Logger(true, false))
};
});
The brief page below does not work. Specifically, "window.speechSynthesis.speak(msg)" does not work until the button has been pressed. If the button has been pressed then the "Hello" message works. If it has not then any calls to "window.speechSynthesis.speak(msg)" do not produce any audible output.
Suspecting that it has something to do with initialization of speechSynthesis - some things have been tried below to ensure that it is initialized when "Hello" is called. None have worked. Although it seems like it should have. It seems like it is getting properly initialized only if it is called from the button press.
The setup of the SpeechSynthesisUtterance itself is the same whether called from the button or the timeout. That setup works when called by the button. But nowhere else until it has been called by the button.
What is wrong here?
<!DOCTYPE html>
<html>
<head>
<title>Voice Test 3</title>
</head>
<body>
<div id="header">User Interface Terminal</div>
<input type="text" id="control_box"></input><br>
<button id="startButton" onclick="voicemessage('Button');">start</button><br>
<script>
function voicemessage(ttstext) {
var msg = new SpeechSynthesisUtterance(ttstext);
msg.volume = 1;
msg.rate = 0.7;
msg.pitch = 1.3;
window.speechSynthesis.speak(msg);
document.getElementById('control_box').value = ttstext;
}
window.speechSynthesis.onvoiceschanged = function() {
document.getElementById('control_box').value = "tts voices recognized";
window.setTimeout(function() {
voicemessage("Hello");
}, 5000);
};
window.addEventListener('load', function () {
var voices = window.speechSynthesis.getVoices();
})
</script>
</body>
</html>
This may be due to the browser itself...
Recent updates in some browsers (Firefox and Chrome) have policies to prevent audio from being accessed unless some user interaction triggers it (like a button click)...
Here is my current code: https://jsfiddle.net/n7u4twb1/10/
Current js code:
Data={
num_files:2
}
Video = {
preview: {
play_all: function(){
for(i=0;i<Data.num_files;i++){
$('#video'+i).get(0).play();
}
}
}
}
With the "Play All" button I encounter lag more than half the time. How can I ensure that the videos are played at the same time with no lag? It is to preview video collages (multiple videos) before they are processed and turned into one video -- I want users to be able to edit the timing at which each video starts but they need a way to preview the collage before the processing starts! Thanks in advance
If you have a button for each video, add an extra button that uses the .click() method. The .click() method is like jQuery .trigger() method which when invoked will auto click whatever it's bound to.
Demo
var ui = document.forms.ui;
var btns = ui.elements;
btns[0].onclick = function(e) {
play(0);
}
btns[1].onclick = function(e) {
play(1);
}
btns.vSync.onclick = function(e) {
btns[0].click();
btns[1].click();
}
function play(idx) {
var vids = Array.from(document.querySelectorAll('video'));
var vid = vids[idx];
if (vid.paused || vid.ended) {
vid.play();
} else {
vid.pause();
}
}
<video src='https://storage04.dropshots.com/photos6000/photos/1381926/20170326/005609.mp4' width='240'></video>
<video src='https://storage04.dropshots.com/photos6000/photos/1381926/20170326/005609.mp4' width='240'></video>
<form id='ui'>
<button data-id='0' type='button'>VIDEO A</button>
<button data-id='1' type='button'>VIDEO B</button>
<button id='vSync' type='button'>SYNC</button>
</form>
I have been asked to update my question so here goes:
I have records in a database, some of which have wave file names attached. I am looping through the database and wanting to write out the word "Play" in a column under a header named Audio File. When "Play" is clicked on, the audio player plays the file and turns the href word to "Pause". When my code loops through these records, it is assigning a separate ID to each href. For me to call the function that starts the audio player, I need to send an audioControl ID (aControl) variable as well as the src source file (thissource) variable for the audio player - hence the & and " in the function call. When I use the onclick event in a button, it triggers the function. However, when I click the href link (which is what I want instead of a button) nothing happens. I am not sure which part of the code is messy, as I found the function code on the internet. Thank-you in advance for any and all help.
No matter what I do, my href onclick will not trigger a javascript function. I have taken the return false out of the function and put it in the href but that doesn't work either. I have put the same onclick code in a button and it triggers great.
HTML:
<a href='#' onclick='passvariables(" & aControl & "," & thissource & ");'>Play</a>
Javascript:
function passvariables(aControl, thissource)
{
var yourAudio= new Audio();
yourAudio.src = thissource;
yourAudio.type = 'audio/wav';
ctrl = document.getElementById(aControl);
ctrl.onclick = function ()
{
// Update the Button
var pause = ctrl.innerHTML === 'Pause';
ctrl.innerHTML = pause ? 'Play' : 'Pause';
// Update the Audio
var method = pause ? 'pause' : 'play';
yourAudio[method]();
// Prevent Default Action
return false;
}
}
Just have onclick call passvariables without the return and have passvariables return false.
You can try:
window.passvariables = function(aControl, thissource) {
// Your code
};
My guess if that your function is defined within another function (executed onload for instance). Hence "passvariables" is not defined in the "window" scope.
I saw you updated your questions that's good :)
First I recommend you to use the javascript library jquery which is easier to manipulate the DOM and you can easily find ressources and help on this site.
Here's what your code should look. I haven't tested it but it's a good overview of what this should be.
Put this in the <head> section of your HTML code
<script src="http://code.jquery.com/jquery-1.12.0.min.js"></script>
<script>
$(document).ready(function() {
//Assigning onClick function for every HTML tags having the css class "Play"
$('.Play').click(function(){
if($(this).html() == "Play"){
//retrieving information about the audio
var waveFile = $(this).attr("data-waveFile");
var audioId = $(this).attr("data-audioId");
//calling the startAudio function and assign the Audio object to myAudioObject
var myAudioObject = startAudio(waveFile, audioId);
if(myAudioObject){
//Audio started playing
$(this).html("Pause");
}else{
alert("error while starting to play file");
}
}else{
var isPaused = pauseAudio(myAudioObject);
if(isPaused){
//The pauseAudio function returned true so the audio is paused
$(this).html("Play");
}else{
alert("error while pausing");
}
}
});
//Functions to manage audio Player
function startAudio(waveFile, audioId){
audioObject = document.getElementById("audio");
audioObject.src = waveFile;
audioObject.play();
return true;
}
function pauseAudio(){
//do whatever to pause
audioObject = document.getElementById("audio");
audioObject.pause();
return true;
}
});
</script>
in the <body> section of your HTML code where you construct the table using database datas :
<table>
<tr>
<td>Song name</td>
<td>Action</td>
</tr>
<tr>
<td><%=WaveFile%></td>
<td>Play</td>
</tr>
</table>
<audio id="audio"></audio>
Note the <%=WaveFile%> and <%=AudioId%> should be the values you get from the database in your loop
Thank-you everyone for your help! I finally got it working! Here is the code:
yAudio = "'yourAudio" & thisline & "'"
aControl = "'audioControl" & thisline & "'"
thissource = "'/WaveFiles/" & RS.Fields("AudioIssues") &"'"
R"<td width=12 class=allprint>Play</td>"
// Call and play audio via JavaScript
$(document).ready(function()
{
var aElement = document.createElement('audio');
$('.Play').click(function()
{
if($(this).html() == "Play")
{
var waveFile = $(this).attr("data-waveFile");
var audioID = $(this).attr("data-audioId");
aElement.setAttribute('src', waveFile);
aElement.load()
aElement.addEventListener("load", function()
{
aElement.play();
$(this).html("Stop");
$(".duration span").html(aElement.duration);
$(".filename span").html(aElement.src);
}, true);
aElement.play();
$(this).html("Stop");
}
else
{
var waveFile = $(this).attr("data-waveFile");
var audioID = $(this).attr("data-audioId");
aElement.setAttribute('src', waveFile);
aElement.pause();
$(this).html("Play");
}
});
});
I cant seem to understand what I am doing wrong with this I am trying to add in a check box that will target the Iframe created by my predecessor but being a novice to JavaScript I have thus far used snippets of code from various sources to come up with this Frankenstein. I have started courses on java but I'm long off making these codes myself for now.
<b>STATUS TAG</b>
▲
▼
<!--Space--> ||
<!--Refresh page Box-->
<b>Auto Refresh 2Min</b>
<input type="checkbox" name="toggle" value="1" autocomplete="off">
<script>
if (iframeElement.contentWindow.location.hash == "custFrame") {
$("[name=toggle]").prop("checked", true);
pageRefresh = setTimeout(function() {
iframeElement.contentWindow.location.reload();
}, 120000);
}
$("[name=toggle]").click(function() {
if (!$('[name=toggle]').prop('checked')) {
(iframeElement.contentWindow.location.hash = ""
clearTimeout(pageRefresh);
} else {
(iframeElement.contentWindow.location.hash= "custFrame";
pageRefresh = setTimeout(function() {
iframeElement.contentWindow.location.reload()
}, 5000);
}
})
</script>
<!--Space--> ||</p>
<iframe id="custFrame" name="custFrame" src="google.com" marginheight="0" onload="javascript:autoResize(this);" frameborder="0" width="100%" height="80%"></iframe>
<script>
var socket = new easyXDM.Socket({ onReady:
function() { socket.postMessage(document.body.scrollHeight)
}
});
</script>
Inner URLs changed to google for testing
I should mention that I have various Quickbase API commands with the buttons on the top so it must target the frame and cannot revert back to the default url.
This code is completely working for me:
<script type="text/javascript">
// this will run when the document is fully loaded
function init() {
var input = document.querySelector('input[type=checkbox]');
input.onchange=check
function check(){
var start=setTimeout('reload()',3000)
StartStop=input.checked ? start : clearInterval(start)}
}
// this reloads the iframe, and triggers the next reload interval
function reload() {
var iframe = document.getElementById('reloader');
if (!iframe) return false;
iframe.src = iframe.src;
}
// load the init() function when the page is fully loaded
window.onload = init;
</script>
</head>
<body>
<input type="checkbox" id="JustChecked" >checked to get latest<br>
<iframe id="reloader" width="200" height="100" src="test1_frame.html"/>