时间戳

首页 > 解决方案 > 通过ajax动态输入直到嚎叫 - 输入不起作用

javascript - 通过ajax动态输入直到嚎叫 - 输入不起作用

问题描述

我需要一些帮助。我正在尝试让 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

目标是让howler 在第一个声音结束后播放php 扫描的文件夹中的第一个mp3。文件夹中的名称将是随机的。问题是howler 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;

标签： javascriptajax

解决方案

推荐阅读