Мне нужна помощь.Я пытаюсь заставить howler.js добавлять песни из каталога через ajax, но он не работает.
Я делаю комбинацию этого:
https://www.w3schools.com/xml/ajax_php.asp https://www.dyclassroom.com/reference-javascript/work-with-audio-in-javascript-using-howler-js
Цель состоит в том, чтобы заставить ревуна воспроизвести первый mp3, находящийся в папке, отсканированной php, после окончания первого звука.Имена в папке будут случайными.Проблема заключается в том, что ввод вой src не работает!Что я делаю не так?
<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>
и PHP-файл gettrack.php
$path = 'howler/audio/';
$files = array_diff(scandir($path), array('.', '..'));
$hint = $files[2];
echo "howler/audio/" . $hint;