I need some help. I am trying to make howler.js add songs from a directory via ajax, but it is not working.
I am doing a combination of this:
https://www.w3schools.com/xml/ajax_php.asp
https://www.dyclassroom.com/reference-javascript/work-with-audio-in-javascript-using-howler-js
The goal is to get howler to play the first mp3 that is in the folder scanned by php after the first sound has ended. The names in the folder will be random. The problem is that the howler src input does not work! What am I doing wrong?
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<script src="howler/src/howler.core.js"></script>
<button id='howler-play'>Play</button>
<button id='howler-pause'>Pause</button>
<button id='howler-stop'>Stop</button>
<button id='howler-volup'>Vol+</button>
<button id='howler-voldown'>Vol-</button>
<button id='txt1' onclick="showHint()">Go</button>
<br><br>
<form action="">
First name: <input type="text" id="txt1x" onkeyup="showHint(this.value)">
</form>
<p>Suggestions: <span id="txtHint"></span></p>
<script>
var filename = '1';
function showHint() {
var xhttp;
xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("txtHint").innerHTML = this.responseText;
var x = this.responseText;
console.log(this.responseText);
//x = 'howler/audio/80s_vibe.mp3';
//console.log(x);
var howler_example = new Howl({
src: [x],
volume: 0.5,
autoplay: true,
});
howler_example.once('load', function(){
howler_example.play();
});
}
};
xhttp.open("GET", "gettrack.php", true);
xhttp.send();
}
</script>
<script type="text/javascript">
$(function(){
var howler_example = new Howl({
src: ['howler/audio/snap.mp3'],
volume: 0.5,
onend: function() {
console.log('Finished end 1!');
showHint();
console.log(filename);
}
});
$("#howler-play").on("click", function(){
if (howler_example.playing()) {
//console.log('position 1');
}
else {
howler_example.play();
}
});
$("#howler-pause").on("click", function(){
howler_example.pause();
});
$("#howler-stop").on("click", function(){
howler_example.stop();
});
$("#howler-volup").on("click", function(){
var vol = howler_example.volume();
vol += 0.1;
if (vol > 1) {
vol = 1;
}
howler_example.volume(vol);
});
$("#howler-voldown").on("click", function(){
var vol = howler_example.volume();
vol -= 0.1;
if (vol < 0) {
vol = 0;
}
howler_example.volume(vol);
});
});
</script>
</body>
</html>
and PHP file gettrack.php
$path = 'howler/audio/';
$files = array_diff(scandir($path), array('.', '..'));
$hint = $files[2];
echo "howler/audio/" . $hint;
Related
I want to prevent user from predicting the target script (test.php) AND do the whole "counter" logic on the server side.
I don't know how to achieve it with PHP.
I would like to open the file from the server side with PHP so the client will not have the possibility to see and know what file will open after 15 clicks. Because by typing the URL of the file it is possible to open it even before 15 clicks.
Thanks
HTML
<div id='overlay' class='overlay'></div>
<div class="view" id="view"></div>
<div class="canvas">
<div id="totalCounter" class="total-counter"></div>
<button id="clap" class="clap-container" tabindex="-1"></button>
<div id="clicker" class="click-counter">
<span class="counter"></span>
</div>
</div>
JAVASCRIPT
let accCounter = 0;
let totalCount = 0;
document.getElementById('totalCounter').innerText = totalCount;
document.getElementById('clap').onclick = function() {
const clap = document.getElementById('clap');
const clickCounter = document.getElementById("clicker");
upClickCounter();
loadDoc();
}
function upClickCounter() {
const clickCounter = document.getElementById("clicker");
const totalClickCounter = document.getElementById('totalCounter');
accCounter ++;
clickCounter.children[0].innerText = '+' + accCounter;
totalClickCounter.innerText = totalCount + accCounter;
}
function loadDoc() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("view").innerHTML = this.responseText;
}
};
xhttp.open("GET", "clickcheck.php", true);
xhttp.send();
document.getElementById("view").style.visibility="visible";
if (totalCount + accCounter%15) {
document.getElementById('view').style.visibility="hidden";
}
document.getElementById('overlay').style.display = 'block';
if (totalCount + accCounter%15) {
document.getElementById('overlay').style.display = 'none';
}
}
clickcheck.php:
<?php
session_start();
if (!array_key_exists('clickcount', $_SESSION)) {
$_SESSION['clickcount'] = 1;
}
if ($_SESSION['clickcount'] < 15) {
header('HTTP/1.1 404 Not found');
exit();
} else {
include("test.php");
}
?>
Having issues with interactions of code. Trying to split presentation from logic with no success.
Tried splitting the functions called into separate listeners and also altered element ids just in case there was an incidental misidentification by either language, but no dice.
document.getElementById("clockInBtn").addEventListener("click", function(){
clockIn('clockin');
resetBtnTxt('clockin', clock.inText);
});
Completely unresponsive.
EDIT:
<?php
session_start();
?>
<!DOCTYPE html>
<html>
<head>
<title>Time Clock</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="timeclock2.css">
<script src="timeclock2.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<div class="main">
<h3 id="time">Current time is: </h3>
<div class="btns-cont">
<div class="btnstxt">
<p id="clockin">Clock-in time: </p>
<p id="clockout">Clock-out time: </p>
</div>
<div class="btns">
<button type="button" id="clockInBtn">Clock In</button>
<button type="button" id="clockOutBtn">Clock Out</button>
</div>
<div class="btnstxt">
<p id="breakout">Break-out time: </p>
<p id="breakin">Break-in time: </p>
</div>
<div class="btns">
<button type="button" onclick="breakOut('breakout'); resetBtnTxt('breakout', rest.outText)">Break Out</button>
<button type="button" onclick="breakIn('breakin'); resetBtnTxt('breakin', rest.inText2)">Break In</button>
</div>
</div>
</div>
</body>
</html>
var clock = {
bool: false,
in: 0,
inText: "Clock-in time: ",
inText2: "Already clocked in: ",
out: 0,
outText: "Not clocked in.",
outText2: "Clock-out time is: "
};
var rest = {
bool: false,
out: 0,
outText: "Break-out time is: ",
outText2: "Already on break: ",
in: 0,
inText: "Not on break.",
inText2: "Break-in time is: "
};
function clockIn(id) {
switch (clock.bool) {
case false:
var d = new Date();
var t = d.toLocaleTimeString();
clock.bool = true;
clock.in = t;
document.getElementById(id).innerHTML = clock.inText + clock.in;
onClockIn();
break;
case true:
document.getElementById(id).innerHTML = clock.inText2 + clock.in;
break;
}
};
function clockOut(id) {
switch (clock.bool) {
case false:
document.getElementById(id).innerHTML = clock.outText;
break;
case true:
var d = new Date();
var t = d.toLocaleTimeString();
clock.bool = false;
clock.out = t;
document.getElementById(id).innerHTML = clock.outText2 + clock.out;
onClockOut();
break;
}
};
function breakOut(id) {
switch (rest.bool) {
case false:
var d = new Date();
var t = d.toLocaleTimeString();
rest.bool = true;
rest.out = t;
document.getElementById(id).innerHTML = rest.outText + rest.out;
break;
case true:
document.getElementById(id).innerHTML = rest.outText2 + rest.out;
break;
}
};
function breakIn(id) {
switch (rest.bool) {
case false:
document.getElementById(id).innerHTML = rest.inText;
break;
case true:
var d = new Date();
var t = d.toLocaleTimeString();
rest.bool = false;
rest.in = t;
document.getElementById(id).innerHTML = rest.inText2 + rest.in;
break;
}
};
var myVar = setInterval(myTimer, 1000);
function myTimer() {
var d = new Date();
var t = d.toLocaleTimeString();
document.getElementById("time").innerHTML = "Current time is: " + t;
};
function resetBtnTxt(id, text) {
setTimeout(function () {
document.getElementById(id).innerHTML = text;
}, 3000);
};
function onClockIn() {
var xhttp = new XMLHttpRequest();
// xhttp.onreadystatechange = function () {
// if (this.readyState != 4 && this.status != 200) {
// alert("Connection error");
// }
// };
xhttp.open("GET", "php-onclockin.php", true);
xhttp.send();
};
function onClockOut() {
var xhttp = new XMLHttpRequest();
// xhttp.onreadystatechange = function () {
// if (this.readyState != 4 && this.status != 200) {
// alert("Connection error");
// }
// };
xhttp.open("GET", "php-onclockout.php", true);
xhttp.send();
};
function login() {
$(function () {
var text = $("#login").val();
$("#btn0").click(function () {
text += "0";
$("#login").val(text);
});
$("#btn1").click(function () {
text += "1";
$("#login").val(text);
});
$("#btn2").click(function () {
text += "2";
$("#login").val(text);
});
$("#btn3").click(function () {
text += "3";
$("#login").val(text);
});
$("#btn4").click(function () {
text += "4";
$("#login").val(text);
});
$("#btn5").click(function () {
text += "5";
$("#login").val(text);
});
$("#btn6").click(function () {
text += "6";
$("#login").val(text);
});
$("#btn7").click(function () {
text += "7";
$("#login").val(text);
});
$("#btn8").click(function () {
text += "8";
$("#login").val(text);
});
$("#btn9").click(function () {
text += "9";
$("#login").val(text);
});
$("#btnReset").click(function () {
text = "";
$("#login").val(text);
});
});
}
document.getElementById("clockInBtn").addEventListener("click", function(){
clockIn('clockin');
resetBtnTxt('clockin', clock.inText);
});
I'm trying to use JavaScript to display data from an XML file. My data isn't being displayed to the web page and I'm not sure why.
Any help/advice would be appreciated. My code is displayed below.
NOTE - I have no experience with XML so be aware that I am completely new to it.
<script>
var xmlData;
function loadXml () {
var filename = "CDLibrary.xml";
var XMLhttp = new XMLHttpRequest();
XMLhttp.open("GET", filename, true);
var ok = true;
try {
XMLhttp.send();
}
catch(err) {
ok = false;
alert ("Database not found");
}
if (ok) {
xmlData = XMLhttp.responseXML;
displayXml(xmlData);
}
}
function displayXml () {
var CdElements;
var CdTitle;
var count;
CdElements = xmlData.getElementsByTagName("CD");
for (count = 0; count < CdElements.length; count=count+1) {
CdTitle = CdElements[count].getElementsByTagName("title");
document.getElementById("output").innerHTML = document.getElementById("output").innerHTML + CdTitle[0].childNodes[0].nodeValue + "</br>";
}
}
</script>
</head>
<body>
<div>
<p id="output">
</p>
<p id="buttons">
<input type="button" id="btnDisplay" value="Display CDs" onclick="loadXml();">
</div>
</body>
<html>
<head><title>Import XML Data</title></head>
<body>
<div>
<p id="output">
</p>
<p id="buttons">
<input type="button" id="btnDisplay" value="Display CDs" onclick="loadXml()">
</div>
<script>
var xmlData;
function loadXml () {
var filename = "CDLibary.xml";
var XMLhttp = new XMLHttpRequest();
XMLhttp.open("GET", filename, true);
var ok = true;
try {
XMLhttp.send();
}
catch(err) {
ok = false;
alert ("Database not found");
}
if (ok) {
xmlData = XMLhttp.responseXML;
displayXml(xmlData);
}
}
function displayXml(xmlDataBase) {
var CdElements;
var CdTitle;
var count;
CdElements = xmlDataBase.getElementsByTagName("CD");
for (count = 0; count < CdElements.length; count=count+1) {
CdTitle = CdElements[count].getElementsByTagName("title");
document.getElementById("output").innerHTML = document.getElementById("output").innerHTML + CdTitle[0].childNodes[0].nodeValue + "</br>";
}
}
</script>
</body>
</html>
You're not using the var xmlData instead you're using a var xmlDataBase. Replace you code to:
CdElements = xmlData.getElementsByTagName("CD");
And since you're using a global var xmlData, it's available inside displayXml function, in this case no need for function displayXml(xmlDataBase) if you use function displayXml() it'll be enough.
Using the w3schools link and changing some information and changing the directory I got it working. There must be an error in the template i was following, thank you all for your time and efforts.
<html>
<style>
table,th,td {
border : 1px solid black;
border-collapse: collapse;
}
th,td {
padding: 5px;
}
</style>
<body>
<button type="button" onclick="loadDoc()">Get my CD collection</button>
<br><br>
<table id="demo"></table>
<script>
function loadDoc() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
myFunction(this);
}
};
xhttp.open("GET", "CDLibrary.xml", true);
xhttp.send();
}
function myFunction(xml) {
var i;
var xmlDoc = xml.responseXML;
var table="<tr><th>Artist</th><th>Title</th></tr>";
var x = xmlDoc.getElementsByTagName("CD");
for (i = 0; i <x.length; i++) {
table += "<tr><td>" +
x[i].getElementsByTagName("performer")[0].childNodes[0].nodeValue +
"</td><td>" +
x[i].getElementsByTagName("title")[0].childNodes[0].nodeValue +
"</td></tr>";
}
document.getElementById("demo").innerHTML = table;
}
</script>
</body>
</html>
I am just trying to prototype a simple functionality using javascript for learning purpose, but the contents within the <p> tag are not updating and I am stuck at this point. My code is as follows:
<!DOCTYPE html>
<html>
<head>
<title> Ajax Search Box </title>
<script>
function LoadList()
{
var searchBox = document.getElementById("txtSearch");
var resultBox = document.getElementById("results");
var searchedChars = "";
var xHttp = new XMLHttpRequest();
searchedChars += searchBox.value;
xHttp.onreadystatechange = function(){
if(this.readyState == 4 && this.status == 200)
{
var xmlContent = this.responseXML;
var nameList = xmlContent.getElementsByTagName("name");
var dispText = "";
for(var i = 0 ; i < nameList.length ; i++)
{
dispText += nameList[i].textContent + "<br/>";
}
resultBox.innerHtml = dispText;
}
};
xHttp.open("GET","AssessorList.xml",true);
xHttp.send();
}
</script>
</head>
<body>
<input id="txtSearch" type="text" placeholder="Search" onkeyup="LoadList();" />
<p id="results">
No Data Available.
</p>
</body>
</html>
Could someone tell me why the innerHtml is not updating? Thanks in advance.
P.S: The code is fetching the data from the xml file as I could see in browser's console, the values being passed to the dispText variable.
<!DOCTYPE html>
<html>
<body>
<input id="txtSearch" type="text" placeholder="Search" onkeyup="LoadList();" />
<p id="results">No data available</p>
<script>
function LoadList() {
var xhttp = new
XMLHttpRequest();
var searchBox =
document.getElementById("txtSearch");
var resultBox = document.getElementById("results");
var searchedChars = "";
searchedChars += searchBox.value;
xhttp.onreadystatechange = function() {
//alert(this.status);
if (this.readyState == 4 && this.status == 200) {
var xmlContent = this.responseXML;
var nameList = searchedChars;
alert(nameList);
var dispText = "";
for(var i = 0 ; i < nameList.length ; i++)
{
dispText += nameList[i] + "<br/>";
}
resultBox.innerHTML = dispText;
}
};
xhttp.open("GET", "ajax.txt", true);
xhttp.send();
} </script>
</body>
</html>
Hope this may help you
I have been following a video tutorial on youtube for an AJAX upload, i know a fair amount of javascript, jquery, etc but this has me stumped.
my code is below, can anyone enlighten me as to why this is happening when i try to uploade more than one file or in some cases 1 file.
I have included my code below, its not perfect as i said i was follwoing along with a video tutorial.
<?php
if (!empty($_FILES['file']))
{
foreach($_FILES['file']['name'] as $key=>$name)
{
if ($_FILES['file']['error'][$key] == 0 && move_uploaded_file($_FILES['file']['tmp_name'] [$key], "uploads/{$name}"))
{
$uploaded[] = $name;
}
}
if (!empty($_POST['ajax']))
{
die(json_encode($uploaded));
}
}
?>
<html>
<head>
<title></title>
<script type="text/javascript" src="upload.js"></script>
</head>
<style type="text/css">
#upload_progress {display: none;}
</style>
<body>
<div id="uploaded">
<?php
if(!empty($uploaded))
{
foreach ($uploaded as $name) {
echo '<div>'.$name.'</div>';
}
}
?>
</div>
<div id="upload_progress"></div>
<form method="post" action="" enctype="multipart/form-data">
<input type="file" id="file" name="file[]" multiple="multiple">
<input type="submit" id="submit" value="upload">
</form>
</body>
</html>
And my JS file is
var handleUpload = function(event) {
event.preventDefault();
event.stopPropagation();
var fileInput = document.getElementById('file');
var data = new FormData();
data.append('ajax', true);
for (var i = 0; i < fileInput.files.length; ++i)
{
data.append('file[]', fileInput.files[i]);
}
var request = new XMLHttpRequest();
request.upload.addEventListener('progress', function(event) {
if (event.lengthComputable)
{
var percent = event.loaded / event.total;
var progress = document.getElementById('upload_progress');
while (progress.hasChildNodes())
{
progress.removeChild(progress.firstChild);
}
progress.appendChild(document.createTextNode(Math.round(percent * 100) + '%'));
}
});
request.upload.addEventListener('load', function(event) {
document.getElementById('upload_progress').style.display = 'none';
});
request.upload.addEventListener('error', function(event) {
alert("Upload Failed");
});
request.addEventListener('readystatechange', function(event) {
if (this.readyState == 4) {
if (this.status == 200)
{
var links = document.getElementById('uploaded');
console.log(this.response);
var uploaded = JSON.parse(this.response);
var div, a;
for (var i = 0; i < uploaded.length; i++)
{
div = document.createElement('div');
a = document.createElement('a');
a.setAttribute('href', 'uploads/' + uploaded[i]);
a.appendChild(document.createTextNode(uploaded[i]));
div.appendChild(a);
links.appendChild(div);
}
} else {
console.log("error" + this.response);
}
}
});
request.open('POST', 'index.php');
request.setRequestHeader('Cache-Control', 'no-cache');
document.getElementById('upload_progress').style.display = 'block';
request.send(data);
}
window.addEventListener('load', function(event) {
var submit = document.getElementById('submit');
submit.addEventListener('click', handleUpload);
});
Initially the video had me using eval for the variable uploaded, i changed this to JSON.parse, i don't want a quick fix but rather an answer as to why this isn't working?
Thanks
Ben
I found out what the problem was, inside the php.ini file there is a size restriction on my server for file uploads, i increased that and it works fine now.
Anyone else who has the same problem check your upload size!