Question

我正在尝试按照Wami-Recorder所述实施here on stackoverflow，其设置与接受的答案基本相同，即包括swfobject.js，recorder.js和gui.js在head标签中，包含在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 repos中的示例代码的默认实现中，您可以看到Flash GUI，因为它已初始化，但在此示例中，它不依赖于HTML按钮。 Flash仍在按钮下方的页面上，但白色为白色。

您的错误

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

file:///c:/xampp/htdocs/wami/index.html

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

http://localhost/wami/index.html

效果很好。

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

我的设置：

我正在使用XAMPP，因此浏览器网址设置为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文件被创建，我提升了它的权限进行测试（右键单击，为所有用户添加FULL CONTROL权限（我在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>

Answer 2

Flash对象嵌入在页面中，但没有一个事件侦听器正在工作。我已经切换到jRecorder link，并对代码进行了一些修改，让它没有任何问题。

wami-recorder - Wami.startRecording不是一个功能

2 个答案: