Отображать и воспроизводить аудиофайл, выбранный во входном JavaScript - PullRequest
Новая
       6

Отображать и воспроизводить аудиофайл, выбранный во входном JavaScript

0 голосов
/ 28 февраля 2019

Я не могу найти способ воспроизведения аудиофайла, который пользователь только что выбрал с помощью входа.У меня есть следующий ввод: 

<input type='file' id="audio-input" class="audio-input" name="audio" accept=".mp3, .wav"/>

Я хотел бы отобразить аудиофайл, когда пользователь выберет его, чтобы он мог его воспроизвести.Это было бы что-то вроде этого: 

('#audio-input-0').change( function () {

    let audio =
        "<audio controls>" +
        "     <source id='audioFile' type='audio/mpeg'>" +
        "     Your browser does not support the audio element." +
        "</audio>";

    $('body').append(audio);

    $('#audioFile').attr('src', $(this).val());
});

Я надеюсь, вы понимаете, что я пытаюсь сделать, я не знаю, как это объяснить (возможно, поэтому я не могу найти ответы надругие темы).

1 Ответ

0 голосов
/ 28 февраля 2019

.val() на самом деле не имеет файла, который вы положили в input.Вам необходимо использовать его свойство files.

Подумайте о том, чтобы прочитать эту статью MDN, которая продемонстрирует использование файлов: Использование файлов из веб-приложений и эту документацию по URL.createObjectURL(), который вам нужно использовать, чтобы предоставить вашему <audio> src. 

function changeHandler({
  target
}) {
  // Make sure we have files to use
  if (!target.files.length) return;

  // Create a blob that we can use as an src for our audio element
  const urlObj = URL.createObjectURL(target.files[0]);

  // Create an audio element
  const audio = document.createElement("audio");

  // Clean up the URL Object after we are done with it
  audio.addEventListener("load", () => {
    URL.revokeObjectURL(urlObj);
  });

  // Append the audio element
  document.body.appendChild(audio);

  // Allow us to control the audio
  audio.controls = "true";

  // Set the src and start loading the audio from the file
  audio.src = urlObj;
}

document
  .getElementById("audio-upload")
  .addEventListener("change", changeHandler);
<div><label for="audio-upload">Upload an audio file:</label></div>
<div><input id="audio-upload" type="file" /></div>
...