0

I am application a website using PHP, MySQL and PHPMyAdmin. I can store and retrieve images from it using ($_FILES) approach. I have a problem though, I want to know how I can store and retrieve audio paths from database and display it. The audios ARE NOT UPLOADED are RECORDED with record.js. I am struggling to accomplish this to save the audio to the file system (folder) path then to the database. what is the best way and how? I would be grateful for any help, Thanks.

I repeat I am NOT ULOAPING THE THE AUDIO USING INPUT ELEMENTS I AM RECORDING IT.

I will show my code snippets below upload file receiving the file from js and
js sending the file once stopped recording

 mediaRecorder.onstop = (ev)=> {
  let blob = new Blob(veepoData, { 'type' : 'audio/ogg; codecs=opus' });
  let audioURL = window.URL.createObjectURL(blob);
  /***  Div with url holder ***/
 /* dataUrlDiv.innerHTML = audioURL;*/
  /** Audio controls, for preview the recording**/
  audioSave.src = audioURL;
  VeepoRec(blob);
}

mediaRecorder.ondataavailable = function(ev) {
  veepoData.push(ev.data);
}

function VeepoRec(blob) { 
  var fd = new FormData(); 
  fd.append('file', blob); 
  $.ajax({ 
      url: 'action.php', 
      data: fd, 
      type: 'post', 
      contentType: false, 
      processData: false, 
      success: function(response){ 
          if(response != 0){ 
             console.log('upload success'); 
          } 
          else{ 
              console.log('failed'); 
          } 
      }, 
  }); 
};

getting the file from action.php

if(isset($_FILES['file'])) {

$audio = ($_FILES['file']['tmp_name']);
var_dump($_FILES['file']['tmp_name']);
die();
$target_path = 'veepos/' . $audio;

$veepo_rec = '<audio class="veepoRec" controls="controls" src="'.$target_path.'"></audio>';
if(move_uploaded_file($target_path))
{
    $veepo_rec = '<audio class="veepoRec" controls="controls" src="'.$target_path.'"></audio>';
    
}

}

Ab Kabane
  • 13
  • 5
  • I can add the image path and retrieve it from the database. this how I did it using the input element: echo '


    ';     – Ab Kabane Oct 19 '20 at 12:05
  • without input element, its a nightmare for me, help guys – Ab Kabane Oct 19 '20 at 12:06
  • Everything I have read points to using form and input element. And I am interested in the recorded file input – Ab Kabane Oct 19 '20 at 12:12
  • 1
    Edit your post to include the code. I know you've linked to it, but it's a link to pictures of it, not the code itself. Apart from anything, if someone wanted to actually try your code out to see if they could help, they'd have to type it all in, instead of copy/paste if you put it in the question. – droopsnoot Oct 19 '20 at 12:30
  • record.js outputs a `blob` (as shown in the examples and documentation). So https://stackoverflow.com/questions/13333378/how-can-javascript-upload-a-blob will probably help you. (It always helps to abstract your problem out - you can forget that it's about audio recording, that's largely irrelevant. You just have to look at what the output of the recording process is - that's the thing you need to upload, and it's in a standard format for which there is already a known process to upload it.) – ADyson Oct 19 '20 at 12:39
  • I did add code snippets and I will add more – Ab Kabane Oct 19 '20 at 12:46
  • I have been trying different approach to achieve this seems like in not near it – Ab Kabane Oct 19 '20 at 12:50
  • @ADyson my only problem is to save that file path to a folder, then store it to the database. And I want to save the file with audio controls so it is easy to replay it – Ab Kabane Oct 19 '20 at 12:58
  • I did manage to save this blob to the database but it doesn't play, so the best way is to save it as the path. like this ''; – Ab Kabane Oct 19 '20 at 12:59
  • And I am struggling to accomplish this – Ab Kabane Oct 19 '20 at 12:59
  • Ok that clarifies things. It seems like your main issue is probably that you're trying to use the tmp_name as the path for the ` – ADyson Oct 19 '20 at 13:04
  • something I ma missing if(move_uploaded_file($source_path, $target_path)) { if($file_extension == 'jpg' || $file_extension == 'png' || $file_extension == 'gif' ) { echo '


    '; } }     – Ab Kabane Oct 19 '20 at 13:43
  • in the above piece of code that's where I am able to save path and retrieve it, the trick is that I'm doing all this from the input element – Ab Kabane Oct 19 '20 at 13:45
  • So... `move_uploaded_file($_FILES['file']['tmp_name'], 'veepos/'.$_FILES["file]["name"])`...did you try something like that? Trying to move it to the same path as it came from doesn't make much sense. – ADyson Oct 19 '20 at 13:59
  • Thanks @ADyson, I'm getting the light. much appreciated your explanations – Ab Kabane Oct 19 '20 at 14:50

0 Answers0