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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With