用户输入的音频流

Question

如果音频流不是硬编码的，并且用户可以自己输入流，我该如何设置？

这是我想做的事情，但还没想好怎么做。

代码： 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>

Image

Answer 1

首先，让我们把它做成一个表格。表单是封装输入框集合的标准方式。普通浏览器和屏幕阅读器都能很好地理解它们。

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

这与您的类似，但我做了一些更改：

<label> 元素需要包装它们所标记的内容，或者它们需要 for 属性。否则，它们不是很有用。
我删除了 label class。您可以通过简单地使用 label 作为选择器来在 CSS 中设置样式而无需它。
我给 input 取了个名字，方便以后取值。
input 现在属于 url 类型。这有一些 built-in validation，如果浏览器不支持，将回退到常规 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();
  });
});

Fiddle: https://jsfiddle.net/xnwr5jeq/7/

用户输入的音频流

Audio Stream by User Input

input

html5-audio

audio-streaming