problem z zapisaniem przechwyconego dzwięku z mikrofonu w przeglądarce

pytanie zadane 8 kwietnia 2016 w JavaScript przez sekut1626 Obywatel (1,210 p.)

Witam, mam problem z zapisem przechwyconego dzwięku z mikrofonu w przeglądarce.

Korzystam z biblioteki js o nazwie p5.js http://p5js.org/reference/#/p5.SoundRecorder

problem polega na tym, że po przechwyceniu dźwięku, stopuje go i odtwarzam ale nie mogę go zapisać do pliku. Co mogę robić nie tak ?

mój skrypt "recordAudioPol.js":

var micP, recorderP, soundFileP;


function recordPol() {
   
  micP = new p5.AudioIn();
  
  micP.start();
  
  recorderP = new p5.SoundRecorder();
  
  recorderP.setInput(micP);

  soundFileP = new p5.SoundFile();
  
  recorderP.record(soundFileP);
}



function stopPol() {
   
   recorderP.stop();
}


function playPol() {
   
    soundFileP.play(); 
    
}


function savePol() {
		 
	    saveSound(soundFileP, 'mySound.wav');
}

oraz plik "index.html":

<!DOCTYPE html>
<html>
<head>

	<title></title>
	
 	 <meta charset="UTF-8"/>
		<link rel="stylesheet" type="text/css" href="style/style.css">
		<script language="javascript" type="text/javascript" src="libraries/p5.js"></script>
		<script language="javascript" src="libraries/p5.sound.js"></script>
		  <script language="javascript" src="libraries/p5.dom.js"></script>
		<script language="javascript" src="recordAudioPol.js"></script>
</head>

<body>

	<div id="container">
	
		
			<section id="sekcja_1">
						<a class="button"  onclick="recordPol()">nagraj</a>
						<a class="button"  onclick="stopPol()">stop</a>
						<a class="button"  onclick="playPol()" style="width: 90%">play</a>
			</section>
	
		
			<section id="sekcja_2">
					<a class="button" style="width: 85%" onclick="savePol()">zapisz do bazy</a>
				

	</div>

</body>
</html>

1 odpowiedź

odpowiedź 8 kwietnia 2016 przez ScriptyChris Mędrzec (190,190 p.)
edycja 8 kwietnia 2016 przez ScriptyChris

Czy konsola pokazuje jakieś błędy?

Zobacz co siedzi w zmiennej soundFileP w funkcji savePol(), bo może nie jest to prawidłowa postać danych do zapisania.

function savePol() {
        console.log(soundFileP); // wypisze w konsoli zawartosc zmiennej - sprawdz czy jej zawartosc jest zgodna z tym co przyjmuje potem funkcja saveSound()
        saveSound(soundFileP, 'mySound.wav');
}

Uwagi ogólne:

1. Przenieś skrypty JS z <head> na koniec tagu <body>.

2. Zamiast atrybutów onclick w HTML, użyj addEventListener w JavaScript.

https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener

komentarz 8 kwietnia 2016 przez sekut1626 Obywatel (1,210 p.)

dzięki za uwagi poprawie to :)

a to mi pokazuje konsola:

http://i.imgur.com/1BxGesb.png

komentarz 8 kwietnia 2016 przez ScriptyChris Mędrzec (190,190 p.)
edycja 8 kwietnia 2016 przez ScriptyChris

W której linijce wypisałeś zmienną soundFileP? Bo widzę, że funkcja soundFile jest undefined, ale miałeś sprawdzić co znajduje się w tej zmiennej w momencie wykonywania się tej funkcji do zapisania pliku.

Poza tym, przerzuć te skrypty na koniec body, bo pierwszy błąd informuje o "not ready to play file...". Nie znam tej biblioteki, ale to może być spowodowane tym, że JS umieściłeś w head i DOM nie zdążył się załadować w momencie gdy JS chce już działać z obiektami DOM.