简体   繁体   中英

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:

http://jsfiddle.net/M555r/ - Javascript web browser with key up input box to load new page

$('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

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.

Any advice is appreciated, particularly if you can show me a working example in 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:

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

see here

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

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