Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > JavaScript: для новичков > запись звука

Автор: VanHelsing 9.12.2012, 10:29

Здравствуйте. Необходимо организовать запись звука с микрофона на сайте. Знаю что можно с помощью flash, но не знаю как с его помощью здесь запись файла по умолчанию.
В результате поиска был найден тег <device>
Описание его в html

Код


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru">
<head>
    <title>Упражнения по инностранным языкам</title>
    <link rel="stylesheet" type="text/css" href="styles.css" />    
    <script type="text/javascript" src="script.js"></script>
</head>
<body>
    <div class="wrapper" style="width:100%;padding-left:40%">
        <p>Select device: <device type="audio_capture" id="media_device"></p>
        <input type="button" id="record_ctl_but" value="Record"/>
    </div>        
</body>
</html>

Для записи звука использую JS. Код script.js

Код


window.onload = function() { 
    document.getElementById("media_device").onchange = function () {
    // ready to record
    audioStream = this.data;
    recordCtlBut.disabled = false;
    };
    
    recordCtlBut = document.getElementById("record_ctl_but");
 
    recordCtlBut.onclick = function () {
    if (!recorder) {
        // start recording
        recordCtlBut.value = "Stop";
        recorder = audioStream.record();
        // set the maximum audio clip length to 10 seconds
        recordTimer = setTimeout(stopRecording, 10000);
    } else
        stopRecording();
    };    
 }
 
 function stopRecording() {
    clearTimeout(recordTimer);
    var audioFile = recorder.stop();
    useAudioFile(audioFile);
 
    // reset to allow new recording session
    recorder = null;
    recordCtlBut.value = "Record";
}

Но запись не выполняется. Возможно кто-то пожскажет в чем дело и что я делаю неправильно.

Заранее спасибо.

Автор: skyboy 9.12.2012, 12:54

про device слышу впервые.
могу только сказать, что в HTML5 http://www.html5rocks.com/en/tutorials/getusermedia/intro/

Добавлено через 5 минут и 7 секунд
а <device />, тоже родом из HTML5, похоже, так и http://stackoverflow.com/questions/3012002/which-web-browsers-support-the-html5-device-tag

Автор: VanHelsing 10.12.2012, 05:58

Спасибо большое за информацию. Постараюсь разобраться.

Автор: VanHelsing 10.12.2012, 08:35

Рассмотрел пример.

Код


<canvas id="c"></canvas>
<audio src="back.webm" id="back"></audio>
<script>
    navigator.getUserMedia('audio', gotAudio);
    var streamRecorder;
    function gotAudio(stream) {
        var microphone = context.createMediaStreamSource(stream);
        var backgroundMusic = context.createMediaElementSource(document.getElementById("back"));
        var analyser = context.createAnalyser();
        var mixedOutput = context.createMediaStreamDestination();
        microphone.connect(analyser);
        analyser.connect(mixedOutput);
        backgroundMusic.connect(mixedOutput);
        requestAnimationFrame(drawAnimation);
    
        streamRecorder = mixedOutput.stream.record();
        peerConnection.addStream(mixedOutput.stream);
    }
</script>

Делаю отладку в Firebug и после выполнения строки navigator.getUserMedia('audio', gotAudio);, выполнение завершается. Браузер поддерживает getUserMedia().
Что я делаю неправильно?