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.