quarta-feira, 22 de junho de 2016

Baixar MP3 de vídeos do youtube com Jquery

Hoje venho apresentar a vocês um ótima API para baixar vídeos do yotube, utilizaremos jquery para adaptar nosso código e dar uma boa expereiência aos usuários, se trata de baixar o vídeo do youtube em MP3, apenas o aúdio, nosso código apenas vai trabalhar a montagem do link para que a API faça exatamente o download que o usuario indicou.

Teremos um campo de texto para o usuario inserir a url do vídeo, também receberemos um json da API para mostrar informações do vídeo.

Este será um exemplo simples, mas funcional, espero qaue acompanhem os posts deste blog, pois melhorarei este código para exibir a imagem do vídeo e algumas implementações para baixar vídeos vindos de outros aplicativos, como o app do youtube entre outros.

Vamos criar um campo de texto:

<input type="text" name="url" id="url"> <input type="button" name="download" id="download" value="Baixar">

Agora vamos a parte interessante: 

A Api que utilizaremos está neste endereço: https://www.youtubeinmp3.com/api/

Sinta-se a vontade para ler e estudar a documentação, claro nada demais, apenas uma breve explicação, a parte que interessa é esta:

HTML:
<a href='//www.youtubeinmp3.com/fetch/?video=https://www.youtube.com/watch?v=i62Zjga8JOM' style='text-decoration:none;color:#03a730;'>
<img src='//www.youtubeinmp3.com/icon/download.png' style='vertical-align:middle;'> <strong>Download MP3</strong>
</a>


Utilizaremos para criar um link de download do vídeo

E esta parte:




 JSON

You can also receive the data in JSON by setting the "format" parameter to "JSON".
Example Output
{
"title":"Happy Forever Alone Day (Forever Alone Song)",
"length":"125",
"link":"http:\/\/youtubeinmp3.com\/download\/get\/?i=k1MakL%2FYlh6KUtEHqyQlg9XwtUUWO"

}



Utilizizaremos para solicitar um arquivo Json contendo as informações do vídeo.


Para isso utilizaremos uma função do Jqauery getJSON$.getJSON("https://www.youtubeinmp3.com/fetch/?format=JSON&video="+link, function(resposta) {
a variável link deve conter o que o usuário informou como sendo o link do vídeo
Teremos um espaço para exibir estas informações na página, eu optei por uma listaE no rewtorno teremos:


$(".dados").html(
"<li> Titulo:"+resposta.title +"</li>" +
"<li> Duração:"+resposta.length +"</li>" +
"<li> Link:"+resposta.link +"</li>"
);


Para gerar o link de download:


$(".dwn").attr("href","//www.youtubeinmp3.com/fetch/?video="+link);

Vou deixar o código completo:

<!DOCTYPE html>
<head>
<meta charset="utf8">
<title> baixar youtube </title>
<script type= "text/javascript" src= "http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js" ></script>
<script type="text/javascript">
$(document).ready(function() {
$(".dwn").hide();
$("#download").click(function () {
var link = $("#url").val();
if (link != "") {
$.getJSON("https://www.youtubeinmp3.com/fetch/?format=JSON&video="+link, function(resposta) {
$(".dwn").show();
$(".dwn").attr("href","//www.youtubeinmp3.com/fetch/?video="+link);
$(".dados").html(
"<li> Titulo:"+resposta.title +"</li>" +
"<li> Duração:"+resposta.length +"</li>" +
"<li> Link:"+resposta.link +"</li>"
);
});
}
});
});
</script>
</head>
<body>
<div id="baixar">
<input type="text" name="url" id="url"> <input type="button" name="download" id="download" value="Baixar">
</div>
<a class="dwn" href=""> Baixar MP3 </a>
<ul class="dados">
</ul>
</body>
</html>


Como sempre deixo o link para download do arquivo :  YOUTUBE MP3 JQUERY



Obrigado por acompanhar o blog !!!



















às
Marcadores: , , , , , ,

Nenhum comentário:

Postar um comentário

Assinar: Postar comentários (Atom)