传递createObjectURL

Question

我想将window.URL.createObjectURL(file)创建的地址传递给dancer.js，但我得到GET blob:http%3A//localhost/b847c5cd-aaa7-4ce0-8ff8-c13c6fc3505a.mp3 404 (Not Found)。

我设法创建一个带有通过文件输入选择的文件的音频元素，但dancer.js根本找不到文件......任何想法？ （以下我如何传递ObjectURL）

    $(document).ready(function(){
    $("#submit").click(function(){
        var file = document.getElementById("file").files[0];
        $('body').append('<audio id="audio" controls="controls"></audio>');
        $('#audio').append('<source src='+window.URL.createObjectURL(file)+' type=audio/mpeg />')
        $('body').append('<a href='+window.URL.createObjectURL(file)+'>link</a>')
        dancer(window.URL.createObjectURL(file));
    })
})

Answer 1

查看dancer.js readme，load方法看起来会引用<audio>元素或指定源的配置对象：{scr: varHoldingFileURL}。由于您已经为文件创建了<audio>元素，因此我将其传递给舞者：

$(document).ready(function() {
    var dancer = new Dancer(),
        fileURL;

    $("#submit").click(function(){
            var audioElement,
                file = document.getElementById("file").files[0];

            fileURL = window.URL.createObjectURL(file);

            // remove any preexisting instances of the audio tag
            $('#audio').remove();

            // Revoke any previously used file URL so it doesn't
            // take up memory anymore.
            window.URL.revokeObjectURL(fileURL);

            $('body').append('<audio id="audio" controls="controls"></audio>');
            $('#audio').append('<source src='+ fileURL +' type=audio/mpeg />')
            $('body').append('<a href=' + fileURL +'>link</a>')

            // get a reference to the audio element we created
            audioElement = $('#audio')[0];

            dancer.load(audioElement);
    })
});