Room for Furlan and Wallace Maxters

$.ajax({
url: 'upload.php',
type: 'POST',
dataType: 'html',
data: {audioURL: audioURL},
success: function(res){
console.log(res);
},
error: function(err){
console.og(err);
}
});

esse audioURL é o blob

Wallace Maxters

Então, você já consegue upar ele.

O createObjectURL é realmente temporário.

Furlan

5:28 PM

entao, mas ai eu to passando o blob:http://

certo?

tenho que gerar um arquivo e fazer o move_upload_file

Wallace Maxters

@Furlan o Seu upload via ajax tá errado....

Furlan

oq to mandando errado

Wallace Maxters

dataType: 'html'? como está recebendo isso no backend?

Como está salvando esse áudio?

Furlan

$audioURL = $_POST["audioURL"];

$query = "INSERT INTO audios (audioURL) VALUES ('$audioURL')";
$query = mysql_query($query);

Wallace Maxters

Hum... entendi...

Furlan

5:31 PM

entendeu?

so que ai preciso gerar um arquivo com essa url

Wallace Maxters

Você precisa entender melhor o propósito da Blob Url

ela só serve pra mostrar temporariamente um arquivo que foi aberto localmente

essa referência é perdida depois que a página é atualizada.

Você teria que pegar o BLOB do arquivo (quando falo Blob não estou falando da url, estou falando do conteúdo binário do arquivo) e enviar isso para o servidor...

Furlan

certo

Wallace Maxters

Um pequeno exemplo

55

Q: How can javascript upload a blob?

I have a blob data in this structure: Blob {type: "audio/wav", size: 655404, slice: function} size: 655404 type: "audio/wav" __proto__: Blob It's actually sound data recorded using the recent Chrome getUerMedia() and Recorder.js How can I upload this blob to the server using jquery's post met...

O Blob é o binário do arquivo em forma de objeto javascript. você precisa fazer o envio disso para o servidor....

Parece-me que, quando você envia esse arquivo de áudio, ele já vai com o Base64... Aí no PHP, quando você transforma esse bASë64 a string vai ficar uns caracteres loucos (que é o conteúdo do áudio, o binário)

Você vai criar um arquivo e salvar o conteúdo dessa "string maluca" nele... pronto! você tem o seu MP3/Wav

Furlan

entao

criei esse arquivo

so que nele tem esses caracteres

e ae?

Wallace Maxters

Então, esse arquivo seria o seu MP3.

Se você quer que a pessoa tenha acesso, basta disponibilizar um acesso pra ela...

Furlan

5:37 PM

no php

$data = substr($_POST['data'], strpos($_POST['data'], ",") + 1);
// decode it
$decodedData = base64_decode($data);
// print out the raw data,
//echo ($decodedData);
$filename = "test.txt";
// write the data out to the file
$fp = fopen($filename, 'wb');
fwrite($fp, $decodedData);
fclose($fp);

no js:
var fd = new FormData();
fd.append('fname', 'test.wav');
fd.append('data', audioURL);
$.ajax({
type: 'POST',
url: 'upload.php',
data: fd,
processData: false,
contentType: false
}).done(function(data) {
console.log(data);
});

Wallace Maxters

Bicho, nossa, esse código do cara tá confuso... vou pegar a pergunta que respondi sobre isso

6

A: upload sem refresh com FormData, jquery

Eu utilizo o jQuery, sem plugin, para poder fazer o upload de arquivos. Vou exemplificar de uma maneira bem simplificada: index.php <script src="jquery.js"></script> <script> $(function() { $('form').submit(function(e) { e.preventDefault(); var formData = new FormData...

Não tem segredo, depois disso, precisa apenas fazer um

if (move_uploaded_file($_FILES['image']['tmp_name'], $novo_nome)) {
     echo json_encode($_FILES);
}

Claro, você vai adaptar pro que você precisa.

Mas no caso, você apenas precisa mover esse áudio para uma pasta onde você vai salvar essa url no banco e disponibilizar para o usuário acessar

Furlan

mas ae que ta

la no js

qual q eh o audio?

Wallace Maxters

O e.data

Preste atenção var audioURL = window.URL.createObjectURL(e.data);... Ou seja, você está criando uma url temporária para o objeto, que é o e.data

var formData = new FormData();

formData.append('audio', e.data);

$.ajax({
    url: 'upload.php',
    data: formData,
    type: 'post',
    success: function(response)
    {
        console.log(response)
    },
    processData: false,
    cache: false,
    contentType: false
});

No seu caso, ficaria assim.

Pra acessar ele pelo PHP

$arquivo = "nome_que_vocè_vai_salvar.mp3";

if (move_uploaded_file($_FILES['audio']['tmp_name'], $arquivo)) {

}

Furlan

blz, ta movendo o arquivo, tudo certinho, so que nao consigo ouvir ;/

Wallace Maxters

tem alguma coisa no áudio?

Furlan

5:47 PM

tem q ser mp3?

wav?

tem sim

tanto que aqui:

audio.src = audioURL;

eu consigo ouvir dps

Wallace Maxters

@Furlan aconselho a retornar essa url do upload pelo ajax e executá-la no response

$arquivo = uniqid() . '.mp3';

if (move_uploaded_file($_FILES['audio']['tmp_name'], $arquivo))
{
    // Salva o nome do arquivo no banco

    header('content-type: application/json');

    exit(json_encode(['url' => $arquivo]));
}

var formData = new FormData();

formData.append('audio', e.data);

$.ajax({
    url: 'upload.php',
    data: formData,
    type: 'post',
    success: function(response)
    {
        $('#meu-audio').attr({src: response.url})
    },
    processData: false,
    cache: false,
    contentType: false
});

Furlan

cara acho q deu certo

auehaeuhaeuh

boa

foi

de vdd

obg

Wallace Maxters

6:17 PM

beleza, mano

Transcript for

Room for Furlan and Wallace Maxters