如何設置帶有KeyUp的輸入框以加載HTML5音頻源？

Question

我在這里發現了一些JSFiddles分叉了兩個以下腳本：

http://jsfiddle.net/M555r/-Java 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();

在我看來這很有意義，但是我不確定正確的語法等

Answer 1

回答一下：

這是代碼：

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();
}

看這里