Question

我正在尝试隐藏动态加载的音频元素，而是让他们休息的div在点击时播放mp3文件。我尝试使用var audio = document.getElementsbyTagName并使用“audio”标签来创建函数play（），但它不起作用，并且getElementById仅在两个div上播放了第一个音频。这是我的代码：

<!DOCTYPE html>
<HTML lang="en-US">
<HEAD>
<TITLE>load files</TITLE>  
<SCRIPT>
function get_list_of_files_from_html( html_string ){
    var el = document.createElement( 'html' );
    el.innerHTML = html_string;

    var list_of_files = el.getElementsByTagName( 'a' );

    var return_string ='<UL>';

    for(var i=5; i < list_of_files.length ; i++){
        var current_string = list_of_files[i];
        var new_string =
            current_string.toString().replace(
                /http:\/\/www.website.com/~user\/programmingfinal\//g,''
            );
        return_string += '<li><div class="floating">'+new_string +
                         '<audio controls> <source src = "' +
                         current_string + '" type="audio/mpeg"></audio>';
        return_string += '</div>';
    }
    return_string += '</UL>';
    return return_string;
}

function loadDoc(){
    var xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
            document.getElementById("container").innerHTML =
                get_list_of_files_from_html( this.responseText);
        }
    };
    xhttp.open("GET",
        "http://www.website.com/~user/programmingfinal/audiofiles/",
        true);
        xhttp.send();
}
</SCRIPT>
</HEAD>
<body onload="loadDoc()">
<div id="container"  class="container">
</div>
</body>
</HTML>

我如何使用onclick函数在div中播放相应的字符串mp3文件？我试图做这样的事情，但它不起作用：

    for(var i=5; i < list_of_files.length ; i++){
        var current_string = list_of_files[i];
        var new_string =
            current_string.toString().replace(
                /http:\/\/www.website.com\/~user\/programmingfinal\//g,''
            );
        return_string += '<li><div class="floating" onclick="play(/"' +
                        current_string + '/")">' + new_string +
                        '<audio> <source src = "' + current_string +
                        '" type="audio/mpeg"></audio>';
        return_string += '</div>';
    }
    return_string += '</UL>';
    return return_string;            
}

function play(){
    new_string.play(file);
}

对于这个特殊的尝试，它说的是“无效的正则表达式：缺少/。但是，我的各种尝试都没有奏效。

Answer 1

考虑到您是通过XMLHttpRequest加载音频元素，这可能是您的元素在页面加载时无法使用的问题。因此，您的选择器document.getElementsByTagName('audio')无法定位它们。

我建议将您的音频文件加载到一个函数中，然后将 promise 链接到响应：

function loadDoc(method, url) {
    return new Promise(function (resolve, reject) {
        var xhr = new XMLHttpRequest();
        xhr.open(method, url);
        xhr.onload = resolve;
        xhr.onerror = reject;
        xhr.send();
    });
}

现在你可以用：

调用它

request('GET', 'http://www.website.com/~user/programmingfinal/audiofiles/')
.then(function (e) {
    var audio = document.getElementsbyTagName('audio');
    // Process audio files here
}, function (e) {
    // Handle errors
});

加载后处理 .then() 。现在您应该可以访问.then()中的相关元素，但请注意，您想要控制音频的任何内容都必须在同一.then()内完成！

希望这有帮助！：）

如何通过单击相应的div来播放动态加载的音频文件？

1 个答案: