Загрузка аудио в папку с помощью PHP Jquery

Привет Всем.

Ниже мой HTML.

<!DOCTYPE html>
<html>
  <head>
    <script src="src/recorder.js"></script>
    <script src="src/Fr.voice.js"></script>
    <script src="js/jquery.js"></script>
    <script src="js/app.js"></script>
  </head>

  <body>
    <div class="center_div">
      <span class="recording_label">Please wait...</span>
      <span class="loader_bg"></span>
      <span class="loader_bg1"></span>

      <br/>
      <audio controls id="audio"></audio>
    </div>  

    <style>
      .center_div {
        width: 500px;
        height: 150px;
        background-color: #f5f5f5;
        border: 1px solid #808080;
        position:absolute;
        top:50%;
        left:50%;
        margin-left:-250px;/* half width*/
        margin-top:-75px;/* half height*/
        padding:25px;
      }

      .recording_label {
        display: block;
        text-align: center;
        padding: 10px;
        font-family: sans-serif;
        font-size: 1.1em;
        margin-bottom: 25px;
      }

      .loader_bg {
        min-width: 100%;
        background: #c5c5c5;
        min-height: 20px;
        display: block;
      }
      .loader_bg1 {
        min-width: 90%;
        background: grey;
        min-height: 20px;
        display: inline-block;
        position: relative;
        top: -20px;
      } 

      audio {
      }
    </style>
  </body>
</html>

В приведенном выше коде я пытался записать и просмотреть звук после завершения обработки записи. Я хочу загрузить этот предварительный звук в папку с помощью PHP. Может ли кто-нибудь помочь мне в части AJAX, как отправить файл mp3. Я ссылался так много ссылок, но я не мог найти решение для этой части. Пожалуйста, помогите мне. Заранее спасибо. Пожалуйста, обратитесь к моей рабочей скрипке здесь.

Получение исходного файла следующим образом:

<audio controls="" id="audio" src="blob:null/b63e868d-1628-4836-85da-90cf1b5b65c3"></audio>

Как я могу получить этот блоб, преобразовать его в mp3 и сохранить в папке?


person Kavya Shree    schedule 20.03.2017    source источник
comment
audio не является элементом ввода формы, вам нужно изменить/добавить input type=file src = 'blob src'   -  person Sachin Gadagi    schedule 20.03.2017
comment
Так только я пробовал, но я не могу установить входной файл src, как tht   -  person Kavya Shree    schedule 20.03.2017
comment
Я пытался установить значение типа ввода с заголовком set attr и многими другими способами, но я не могу изменить ни один файл, выбранный с именем src.   -  person Kavya Shree    schedule 20.03.2017
comment
Ответьте пожалуйста .. Любой   -  person Kavya Shree    schedule 20.03.2017
comment
Ваш вопрос кажется неясным .. вы тоже хотите записать ? если да, то вы не упомянули здесь ..   -  person Mittul At TechnoBrave    schedule 24.03.2017
comment
Мне нужно записать, а также сохранить записанный звук в папку   -  person Kavya Shree    schedule 24.03.2017
comment
но в этом примере вы получите уже записанный файл в звуковом теге? или вы хотите, чтобы функция записи была здесь?   -  person Mittul At TechnoBrave    schedule 24.03.2017
comment
Также, если вы можете проверить это один раз 9lessons.info/2015 /03/аудио-запись-с-настраиваемым-аудио.html   -  person Mittul At TechnoBrave    schedule 24.03.2017
comment
Да, я уже выполнил эту часть. Теперь я борюсь на этапе загрузки звука. До записи и предварительного просмотра звука и получения аудио Blob, который я закончил   -  person Kavya Shree    schedule 24.03.2017
comment
В этой ссылке они сохранили эту ссылку на блоб в БД, я не хочу этого делать. Мне нужно преобразовать блоб в mp3, а после этого нужно загрузить аудиофайл   -  person Kavya Shree    schedule 24.03.2017
comment
Давайте продолжим это обсуждение в чате.   -  person Mittul At TechnoBrave    schedule 24.03.2017
comment
stackoverflow.com/ вопросы/27220859/   -  person Mittul At TechnoBrave    schedule 24.03.2017
comment
Смотрите мой обновленный ответ   -  person Kavya Shree    schedule 24.03.2017
comment
Теперь проверьте мой вопрос и запустите этот html-код в своем локальном. SO, который вы можете четко понять.   -  person Kavya Shree    schedule 24.03.2017
comment
jsfiddle.net/0vsukbef проверить эту скрипку   -  person Kavya Shree    schedule 24.03.2017


Ответы (1)


Измените код в app.js, как показано ниже. Установите URL-адрес в вызове ajax.

  $(function(){
        var max = 40;
        var count = max + 1;
        var counter = setInterval(timer, 1000);

        function timer() {
            count = count - 1;
            if (count <= 0) {
                clearInterval(counter);
                $(".recording_label").html("Recording...");
                $('.loader_bg1').css({'min-width':''+(100)+'%'})
                    Fr.voice.record(false, function(){});
                    Fr.voice.stopRecordingAfter(40000, function(){
                      //alert("Recording stopped after 40 seconds");
                      Fr.voice.export(function(url){
                        $("#audio").attr("src", url);
                        $("#audio")[0].play();
                      }, "URL");

                    });
                recordingSec(40);
                return;
            }
            $(".recording_label").html("Recording will begin in " + count + " sec.");
            var percent = (count / max ) * 100 ;
            $('.loader_bg1').css({'min-width':''+(100 - percent)+'%'})
        }
  });

  function uploadAudio(){
    Fr.voice.exportMP3(function(blob){
        var data = new FormData();
        data.append('file', blob);

        $.ajax({
            url: "server.php",
            type: 'POST',
            data: data,
            contentType: false,
            processData: false,
            success: function(data) {
                // Sent to Server
            }
        });
    }, "blob");
  }

  function recordingSec(sec){
        var count = sec + 1;
        var counter = setInterval(timer, 1000);

        function timer() {
            count = count - 1;
            if (count <= 0) {
                clearInterval(counter);
                $(".recording_label").html("Recording stopped...Playing");
                $('.loader_bg1').css({'min-width':''+(100)+'%'})
                //stopRecording();
                return;
            }
            $(".recording_label").html("Recording started [ " + (sec - count) + " / " + sec + " ] sec.");
            var percent = (count / sec ) * 100 ;
            $('.loader_bg1').css({'min-width':''+(100 - percent)+'%'})
        }     
  }

См. эту документацию

Проверьте этот файл для справки

Образец Server.php

<?php 
$path = 'audio/'; 
$location = $path . $_FILES['file']['name'] . ".mp3"; 
move_uploaded_file($_FILES['file']['tmp_name'], $location); 
 ?>
person Karthikeyan Vedi    schedule 24.03.2017
comment
Я не могу получить эту ссылку..@karthikeyan - person Kavya Shree; 25.03.2017
comment
Если на одной странице будет несколько записей. Тогда как я могу этого добиться. . - person Kavya Shree; 25.03.2017
comment
@KavyaShree После записи аудиовызова uploadAudio(), обратитесь к части ajax, аудиофайл будет отправлен по URL-адресу - person Karthikeyan Vedi; 25.03.2017
comment
Ya @karthikeyan .Я только так и пробовал. Но он не загружен в папку. И если я попытаюсь щелкнуть ссылку, на которой отображается ошибка, сайт не может быть достигнут. - person Kavya Shree; 25.03.2017
comment
@KavyaShree эталонный образец не включает серверный скрипт, вам нужно написать php-код, чтобы сохранить файл на сервере. - person Karthikeyan Vedi; 25.03.2017
comment
Вместо Fr.voice.exportMP3(function(blob) 'blob' нужно ли мне изменить какое-либо имя. - person Kavya Shree; 25.03.2017
comment
нет необходимости менять какое-либо имя. Напишите файл php, который сохранит файл на сервере, а в части ajax измените URL-адрес этого файла. - person Karthikeyan Vedi; 25.03.2017
comment
Давайте продолжим обсуждение в чате. - person Kavya Shree; 25.03.2017