如何使用KeyUp设置此输入框以加载HTML5音频源

How can I set this Input Box with KeyUp to load HTML5 Audio source?

本文关键字：加载 HTML5 音频 输入 何使用 KeyUp 设置      更新时间：2023-09-26

我在这里找到了几个JSFiddle，以产生以下两个脚本：

http://jsfiddle.net/M555r/-带有向上键输入框的Javascript web浏览器，用于加载新页面

$('input#url').on('propertychange paste keyup',function(){
      var url = this.value;
        $('#frame').attr('src', "http://"+url);
        });
        $('input#url').keyup();

http://jsfiddle.net/Z3VrV/-HTML5音频播放器，带有悬停框以更改源

function changeAudio(song){
    audio = document.getElementById("sound1");
    audio.src = song;
    audio.load();
    audio.play();
}
$("#changemytune").mouseenter(function () {
    changeAudio("http://jeffrey-way.s3.amazonaws.com/zelda.ogg");
})
                .mouseleave(function () {
    changeAudio("http://www.jezra.net/audio/skye_boat_song.ogg");
});

由于我的经验有限，我曾试图将这两个例子结合起来，但没有成功。我想获得的是一个音频播放器，根据iframe示例，您可以在其中键入源代码，播放器源代码会自动更新。

我们非常感谢您的任何建议，特别是如果您能向我展示JSFiddle中的一个工作示例。

谢谢！

编辑：我尝试过以下脚本：

function changeAudio(song){
    audio = document.getElementById("sound1");
    audio.src = song;
    audio.load();
    audio.play();
}
$('input#url').on('propertychange paste keyup',function(){
    changeAudio(url);
})
});
$('input#url').keyup();

这在我的头脑中是有道理的，但我不确定正确的语法等

将其放入答案中：

这是代码：

HTML:

<input type="text" id="url" name="url" value="" />
<br><br>
<audio id="sound1" preload="auto" src="http://www.jezra.net/audio/skye_boat_song.ogg" autoplay controls></audio>
    <div id="status">status</div>

JS:

$('input#url').on('propertychange paste keyup',function(){
  var url = this.value;
   $("#status").html(url);
    changeAudio(url);
});
function changeAudio(song){
    audio = document.getElementById("sound1");
    audio.src = song;
    audio.load();
    audio.play();
}

请参阅此处

相关文章：