javascript - wami-recorder - Wami.startRecording 不是一个函数

Question

我正在尝试实现 Wami-Recorder如上所述here on stackoverflow与接受的答案基本相同的设置，即 head 标签中包含的 swfobject.js、recorder.js 和 gui.js， div 中包含的 html 控件:

<div id="recorder">
    <button id="record">Record</button>
    <button id="play">Play</button>
</div>
<div id="flash"></div>

JavaScript 就位于页面底部 html 结束标记之前:

<script>
Wami.setup({
    id: 'flash' // where to put the flash object
});

// initialize some global vars
var recording = '';
var recordingUrl = '';
var playBackUrl = '';

// get button elements
var record = $('#record');
var play = $('#play');

// define functions
function startRecording() {
    recording = 'temp.wav';
    recordingUrl = 'http://localhost/temp/wami/test/save_file.php?filename=' + recording;
    Wami.startRecording(recordingUrl);
    // update button attributes
    record.html('Stop').unbind().click(function() {
        stopRecording();
    });
}

function stopRecording() {
    Wami.stopRecording();
    // get the recording for playback
    playBackUrl = 'http://localhost/temp/wami/test/' + recording;
    // update button attributes
    record.html('Record').unbind().click(function() {
        startRecording();
    });
}

function startPlaying() {
    Wami.startPlaying(playBackUrl);
    // update button attributes
    play.html('Stop').unbind().click(function() {
        stopPlaying();
    });
}

function stopPlaying() {
    Wami.stopPlaying();
    // update button attributes
    play.html('Play').unbind().click(function() {
        startPlaying();
    });
}

// add initial click functions
record.click(function() {
    startRecording();
});

play.click(function() {
    startPlaying();
});
</script>
</body>

现在，我从未真正见过 Wami-Recorder 的工作演示，但我假设加载时闪存容器中实际上应该有一些东西......？我没有收到任何错误，我可以右键单击应该嵌入 Flash 的区域，上下文菜单确认已加载 Flash 对象，并且 Firebug 显示 DOM 已修改为:

<div id="recorder">
<button id="record">Record</button>
<button id="play">Play</button>
</div>
<div id="flash">
<div id="widb06765e52be" style="position: absolute;">
<object id="wid36dd0ea1ccc" width="214" height="137" type="application/x-shockwave-flash" data="Wami.swf" style="visibility: visible;">
<param name="allowScriptAccess" value="always">
<param name="wmode" value="transparent">
<param name="flashvars" value="visible=false&loadedCallback=Wami._callbacks['wid9ebef515c0b']&console=true">
</object>
</div>
</div>

以及 Wami.swf 文件是通过 GET 获取的，状态为 200。尽管如此，当我单击“录制”按钮时，我收到 TypeError: Wami.startRecording is not a function。我假设这是某种上下文问题，因为由于某种原因 Wami 不是在函数内部使用的全局变量。如果是这样，有人可以解释为什么吗？如果情况并非如此，我忽略了什么？

编辑:有一次，我尝试实现一种更加面向对象的处理方式:

var Audio = {
setup: function() {
     Wami.setup("wami");
}

record: function() {
     Audio.status("Recording...");
     Wami.startRecording("https://wami-recorder.appspot.com/audio");
}

play: function() {
     Wami.startPlaying("https://wami-recorder.appspot.com/audio");
}

stop: function() {
     Audio.status("");
     Wami.stopRecording();
     Wami.stopPlaying();
}

status: function(msg) {
     $('#status').html(msg);
}

};

我会根据其他条件从 document.ready() 方法中触发函数。最初的实现抛出了完全相同的错误，我将其全部剥离以尝试这种更直接的方法......但无济于事。

Answer 1

你走在正确的道路上!写了很多，但我希望它能有所帮助:-D

在使用 Google 存储库中的示例代码的默认实现中，您确实会看到 Flash GUI，因为它已初始化，但在本例中，它没有初始化，并且依赖于 HTML 按钮。 Flash 仍然位于按钮正下方的页面上，但呈白色。

您的错误

使用您的代码和文件，我能够复制您的错误的唯一方法是通过文件系统访问文件:

文件:///c:/xampp/htdocs/wami/index.html

通过网络服务器访问相同的内容:

http://localhost/wami/index.html

效果很好。

所以我的假设是您没有要测试的 Web 服务器，而是使用文件系统。我在下面提供了 XAMPP 和基本设置说明的链接，以及工作代码示例。

我的设置:

我使用的是 XAMPP，因此浏览器 URL 设置为 http://localhost/wami/index.html。

您可以download XAMPP here .

在 Windows 上，默认情况下它将安装在 C:\xampp 中。

• 将所有文件放入 C:\xampp\htdocs\wami 中，一切就都准备好了。
• 在 XAMPP 控制台中启动 APACHE
• 打开浏览器并导航至 http://localhost/wami/index.html

我将所有文件放在该文件夹中(所有 WAMI 文件，包括 save_file.php)。运行并创建第一个 WAV 文件后，我提升了其权限以进行测试(右键单击，为所有用户添加完全控制权限(我使用的是 Windows 7)。

完整的工作代码示例(与您的相同，但有完整的代码块供引用。我从 JavaScript 调用中删除了 https://，因为混合 http 和 https 可能会导致安全弹出窗口和损坏的 JavaScript)

我按原样使用 PHP 文件和以下代码:

<?php
    // get the filename
    parse_str($_SERVER['QUERY_STRING'], $params);
    $file = isset($params['filename']) ? $params['filename'] : 'temp.wav';
    // save the recorded audio to that file
    $content = file_get_contents('php://input');
    $fh = fopen($file, 'w') or die("can't open file");
    fwrite($fh, $content);
    fclose($fh);
?>

HTML 文件:

<!-- index.html -->
<html>
    <head>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
        <script src="//ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script>
        <script src="recorder.js"></script>
    </head>

    <body>
        <div id="recorder">
           <button id="record">Record</button>
           <button id="play">Play</button>
        </div>
        <div id="flash"></div>
        <script type="text/javascript">
            // initialize Wami
            Wami.setup({
                id: 'flash' // where to put the flash object
            });

            // initialize some global vars
            var recording = '';
            var recordingUrl = '';
            var playBackUrl = '';

            // get button elements
            var record = $('#record');
            var play = $('#play');

            // define functions
            function startRecording() {
                recording = 'temp.wav';
                recordingUrl = 'save_file.php?filename=' + recording;
                Wami.startRecording(recordingUrl);
                // update button attributes
                record.html('Stop').unbind().click(function() {
                    stopRecording();
                });
            }

            function stopRecording() {
                Wami.stopRecording();
                // get the recording for playback
                playBackUrl = recording;
                // update button attributes
                record.html('Record').unbind().click(function() {
                    startRecording();
                });
            }

            function startPlaying() {
                Wami.startPlaying(playBackUrl);
                // update button attributes
                play.html('Stop').unbind().click(function() {
                    stopPlaying();
                });
            }

            function stopPlaying() {
                Wami.stopPlaying();
                // update button attributes
                play.html('Play').unbind().click(function() {
                    startPlaying();
                });
            }

            // add initial click functions
            record.click(function() {
                startRecording();
            });

            play.click(function() {
                startPlaying();
            });
        </script>
    </body>
</html>