想做一个基于 URL 的音频播放器，但 Javascript 不起作用答案

【问题标题】：Wanted To make a URL based Audio player, But Javascript is not working想做一个基于 URL 的音频播放器，但 Javascript 不起作用
【发布时间】：2016-04-29 05:53:56
【问题描述】：

我是 JS 新手。我想做一个基于 URL 的音频播放器。它应该通过在文本框中粘贴 mp3 url 来工作，然后单击 go 播放 mp3。但它什么也没做。我的代码有什么问题？

<script type="text/javascript">
function audio{
var url = document.getElementById('lol').value;
var innerHTML = "<audio controls><source type='audio/mp3' src="+url+"/></audio>";
document.write(innerHTML);
}
</script>
<div id="lol">
<form>
<input type="text" id="lol"/>
<input type="submit" onclick="audio()" value="go"/>
</form>
</div>

【问题讨论】：

首先为div 删除id。
document.write 永远不要使用它。 developer.mozilla.org/en-US/docs/Web/API/Document/write

标签： javascript jquery html audio

【解决方案1】：

您有两个 id 为“lol”的元素，并且您的脚本中可能存在函数定义错误。
试试这个，可能有用；）

<script type="text/javascript">
    function audio(){
        var url = document.getElementById('lol').value;
        var innerHTML = "<audio controls><source type='audio/mp3' src="+url+"/></audio>";
        document.write(innerHTML);
    }
</script>
<div id="lol1">
  <form>
    <input type="text" id="lol"/>
    <input type="submit" onclick="audio()" value="go"/>
  </form>
</div>

【讨论】：

【解决方案2】：

存在大量语法错误，建议您在脚本中使用 jsHint。

更正了double lol ids
删除了document.write(innerHTML)
删除了使用名称类似于方法 (innerHTML) 的字符串 (var innerHTML) 的整个尝试。我从不使用字符串来做标记，太容易搞砸了。

源的 cmets 中有更多详细信息。

片段

<!DOCTYPE html>
<html>

<head>
  <style>
    #url {
      width: 47ex;
    }
  </style>
</head>

<body>
  <form>
    <p>Enter this url:</p>
    <code>http://glpjt.s3.amazonaws.com/so/av/balls.mp3</code>
    <br/>
    <br/>
    <input type="text" id="url" />
    <!--Use type="button" instead of "submit"-->
    <input type="button" onclick="audio()" value="go" />
  </form>
  <br/>

  <br/>
  <!--Have an empty div with an id if you plan to create an element -->
  <div id="box"></div>


  <script>
    function audio() {
      var url = document.getElementById('url').value;
      var box = document.getElementById('box');
      // Use createElement to make the audio and source element.
      // Trying to make markup with strings is prone to errors.
      var player = document.createElement('audio');
      // Set controls on audio player
      player.setAttribute('controls', true);
      var source = document.createElement('source');
      // When creating any element, you have to place them
      // into the DOM with appendChild
      player.appendChild(source);
      box.appendChild(player);
      // Assign the value of the input to the src of player.
      // Make sure to load() the player after assigning or changing src
      player.src = url;
      player.load();
    }
  </script>
</body>

</html>

【讨论】：

【解决方案3】：

您的函数实现不正确。应该是：

function audio() {
  var url = document.getElementById('lol').value;
  var innerHTML = "<audio controls><source type='audio/mp3' src="+url+"/></audio>";
  document.write(innerHTML);
}

【讨论】：

【解决方案4】：

在 HTML 页面中，id 应该是唯一的，但您使用相同的 id 两次“lol”。您的函数也会抛出语法错误，因为它不是函数定义语法。应该是：

function audio(){

}

【讨论】：