Аудио поток по пользовательскому вводу - PullRequest
Новая
       42

Аудио поток по пользовательскому вводу

0 голосов
/ 28 декабря 2018

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

Это то, что я хотел сделать, ноне разобрался как это сделать.

Код: https://jsfiddle.net/xnwr5jeq/6/

<audio controls>
 <source src="" type="audio/mpeg">
</audio>

<div class="control">
  <label class="label">Stream</label>
  <input class="input" type="text" />
</div>

Изображение

1 Ответ

0 голосов
/ 29 декабря 2018

Во-первых, давайте сделаем это формой.Формы являются стандартным способом инкапсуляции набора полей ввода.Их хорошо понимают обычные браузеры, но также и программы чтения с экрана, а что нет. 

<form>
  <label>
    Stream
    <input name="url" type="url" />
  </label>
</form>

Это похоже на то, что вы имели, но я сделал несколько изменений:

  • <label> элементам нужно либо обернуть то, что они маркируют, либо им нужен атрибут for.В противном случае они не очень полезны.
  • Я отбросил класс label.Вы можете оформить это в CSS без него, просто используя label в качестве селектора.
  • Я установил имя для input, чтобы упростить получение его значения позже.
  • input теперь имеет тип url.Он имеет некоторую встроенную проверку и будет возвращаться к обычному text вводу, если браузер его не поддерживает.

Ваш audio элемент в порядке, но давайте немного переделаем: 

<audio src=""></audio>

По сути, поскольку мы получаем только один URL-адрес от пользователя, дочерние элементы source не нужны.Нам также не следует устанавливать type, потому что мы не знаем, что это будет.

Теперь, чтобы напрямую ответить на ваш вопрос ... мы обрабатываем отправку формы с помощью JavaScript. 

// Ensure the page is loaded before querying for elements to attach handlers to
document.addEventListener('DOMContentLoaded', (e) => {
  // Get the form, add a submit handler
  document.querySelector('form').addEventListener('submit', (e) => {
    // Get the form values from the form that was just submitted
    const formData = new FormData(e.target);

    // Set the audio `src` attribute from the form's `url` field input value
    document.querySelector('audio').src = formData.get('url');

    // Prevent default form handling (which would reload the page, in this case)
    e.preventDefault();
  });
});

Скрипка: https://jsfiddle.net/xnwr5jeq/7/

...