如何在Xamarin Forms android中使用Wavesurfer.js?

时间:2019-02-04 12:20:20

标签: javascript xamarin wavesurfer.js

现在我正在尝试从内部设备加载文件

Working code:
enter code here
    wavesurfer.load('file:///assests_content/rooster.wav');
        alert('hi2');

无效的代码:

    wavesurfer.load('file:///storage/emulated/0/new/rooster.wav');
        alert('hi2');

1 个答案:

答案 0 :(得分:0)

这段代码可以完美地工作,我通过将文件作为blob加载来对其进行了修复。

"<html>
            <head>
                <script src=""https://unpkg.com/wavesurfer.js""></script>
                <script src=""wavesurfer.spectrogram.js""></script>
            </head>
            <body>
<h1>Xamarin.Forms</h1>
<p>Welcome to WebView.</p>
    <div id=""waveform""></div>
<div id=""spectrogm""></div>
    <div id=""MyTest"">my divs</div>
    <script>
try{
        alert('hi');
        var wavesurfer = WaveSurfer.create({
            container: '#waveform',
            waveColor: 'violet',
            progressColor: 'purple',
            plugins: [
                    WaveSurfer.spectrogram.create({
                        wavesurfer: wavesurfer,
                        container: ""#spectrogm""
                    })
                ]
        });
            alert('hi2');
}
catch(err)
{
    alert(err.message);
}

function readTextFile(file)
{
try
{
    var blob = null;
    var rawFile = new XMLHttpRequest();
    rawFile.open(""GET"", file);
    rawFile.responseType = ""blob"";//force the HTTP response, response-type header to be blob
    rawFile.onload = function()
        {
            blob = rawFile.response;//xhr.response is now a blob object
            alert('blob');
            wavesurfer.loadBlob(blob);
        }
    rawFile.send();
    alert('completed');
}
catch(err)
{
    alert('error');
    alert(err);
}
}
readTextFile('file:///storage/emulated/0/new/rooster.wav');