Wami Recorder 是如何实现的? [英] How is the Wami Recorder actually implemented?

查看：19
本文介绍了Wami Recorder 是如何实现的?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我对 Wami Recorder 非常陌生，而且我从来没有使用过 Flash，所以这实际上可能是一个愚蠢的问题.

基本上，如何实施 Wami Recorder?我在网站上看到过它，它在那里工作得很好，但是当我下载它并尝试在本地主机中使用它作为 Xampp 的一部分时，它不起作用.

如果有人能写一个 Wami Recorder for Dummies 答案，那就太棒了.

如果有人特别了解如何在该框架中使用它，我将在 CakePHP 2.0 中使用它.

基本上我要做的就是录制音频，将文件保存到目录，并获得 POST 信息以便能够将文件的某些详细信息保存到数据库中.

解决方案

是的，文档不是很清楚.我昨天整个下午都在弄明白.这是一个适用于我的本地机器的简单实现.以下文件存储在我的Apache文档根目录/temp/wami/test"下，因此URL为http://localhost/temp/wami/test/":

index.html
recorder.js
save_file.php
Wami.swf

index.html

 <头><script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script><script src="https://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script></script><script src="recorder.js"></script><身体><div id="录音机"><button id="record">Record</button><button id="play">播放</button>

<div id="flash"></div><脚本>//初始化瓦米Wami.setup({id: 'flash'//放置 flash 对象的位置});//初始化一些全局变量var 录音 = '';var recordUrl = '';var playBackUrl = '';//获取按钮元素var record = $('#record');var play = $('#play');//定义函数功能开始录音(){录音 = 'temp.wav';RecordingUrl = 'http://localhost/temp/wami/test/save_file.php?filename='+录音；Wami.startRecording(recordingUrl);//更新按钮属性记录.html('停止').unbind().click(函数(){停止录音()；});}功能停止录音(){Wami.stopRecording();//获取要播放的录音playBackUrl = 'http://localhost/temp/wami/test/' + 录音；//更新按钮属性记录.html('记录').unbind().click(函数(){开始录音()；});}函数开始播放(){Wami.startPlaying(playBackUrl);//更新按钮属性玩.html('停止').unbind().click(函数(){别玩了();});}功能停止播放(){Wami.stopPlaying();//更新按钮属性玩.html('播放').unbind().click(函数(){开始播放()；});}//添加初始点击功能记录.点击(功能(){开始录音()；});播放.点击(功能(){开始播放()；});

save_file.php

应该可以.不幸的是，似乎没有一种方法可以暂停然后继续录制.每次开始录制时，它都会覆盖之前的音频.似乎也没有办法检索有关音频文件的信息(例如长度、大小).有关记录器功能的完整列表，请参阅 Wami 记录器文件 (recorder.js).

I'm very new to the Wami Recorder, and I've never worked with Flash at all, so this may actually be a dumb question.

Basically, how does one go about implementing the Wami Recorder? I've seen it on the website, and it works great on there, but when I download it and try to use it within localhost as part of Xampp, it doesn't work.

If someone could kinda write up a Wami Recorder for Dummies answer, that'd be totally awesome.

I'm using this in CakePHP 2.0 if anyone knows especially how to use it within that framework.

Basically all I'm trying to do is record audio, save the file to a directory, and have POST information to be able to save certain details about the file to a database.

解决方案

Yeah, the documentation is not very clear. I spent all afternoon yesterday figuring it out. Here's a simple implementation that works on my local machine. The following files are stored under my Apache document root in "/temp/wami/test", so the URL is "http://localhost/temp/wami/test/":

index.html
recorder.js
save_file.php
Wami.swf

index.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="https://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script></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>
    </body>

    <script>
        // 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 = '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>

    </html>

save_file.php

    <?php
    /* save_file.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);

That should do it. Unfortunately, there doesn't appear to be a way to pause and then resume recording. Each time you start recording it overwrites the previous audio. There also doesn't appear to be a way to retrieve information about the audio file (e.g. length, size). See the Wami recorder file (recorder.js) for a full list of recorder functions.

这篇关于Wami Recorder 是如何实现的?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆