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

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')不能将它们定位为目标。

我建议您将请求转换为将音频文件加载到函数中，然后将诺言链接到响应中：

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 个解决方案

解决方案1
0 2017-12-10 23:17:11

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

问题描述

1 个解决方案

解决方案1 0 2017-12-10 23:17:11

解决方案1
0 2017-12-10 23:17:11