简体   繁体   English

如何设置带有KeyUp的输入框以加载HTML5音频源?

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

I have forked a couple of JSFiddles I have found on here to come up with the following two scripts: 我在这里发现了一些JSFiddles分叉了两个以下脚本:

http://jsfiddle.net/M555r/ - Javascript web browser with key up input box to load new page 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 Audio player with a Hover Over box to change source 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");
});

With my limited experience I have tried, unsuccessfully, to combine these two examples. 以我有限的经验,我尝试将这两个示例结合在一起,但未成功。 What I would like to acheive is an Audio player where you type in the source and the player source updates automatically, as per the iframe example. 我要实现的是一个音频播放器,您可以在其中键入源,然后根据iframe示例自动更新播放器源。

Any advice is appreciated, particularly if you can show me a working example in JSFiddle. 感谢您提供任何建议,特别是如果您可以在JSFiddle中向我展示一个有效的示例。

Thank you! 谢谢!

EDIT: I have tried scripting such as: 编辑:我尝试过脚本,例如:

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

which in my head makes sense, however I am unsure of the correct syntax etc 在我看来这很有意义,但是我不确定正确的语法等

to put it in an answer: 回答一下:

here is the code: 这是代码:

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

see here 这里

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM