想做一个基于 URL 的音频播放器，但 Javascript 不起作用
Posted
技术标签:
【中文标题】想做一个基于 URL 的音频播放器，但 Javascript 不起作用【英文标题】：Wanted To make a URL based Audio player, But Javascript is not working 【发布时间】：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
【参考方案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()
【讨论】：
以上是关于想做一个基于 URL 的音频播放器，但 Javascript 不起作用的主要内容，如果未能解决你的问题，请参考以下文章