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

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

i have forked couple of jsfiddles have found on here come next 2 scripts:

http://jsfiddle.net/m555r/ - javascript web browser key input box 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 sound player hover on box alter source

function changeaudio(song){ sound = 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 limited experience have tried, unsuccessfully, combine these 2 examples. acheive sound player type in source , player source updates automatically, per iframe example.

any advice appreciated, particularly if can show me working illustration in jsfiddle.

thank you!

edit: have tried scripting such as:

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

which in head makes sense, unsure of right syntax etc

to set in answer:

here 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){ sound = document.getelementbyid("sound1"); audio.src = song; audio.load(); audio.play(); }

see here

javascript html5