使用输入框更改HTML5音频源

Question

Hi fellow stack users!

I am trying to create an audio player where you type the Source into an input box. So far, I really like the way it is supposed to work, however instead of loading the file typed in, it just reloads the original file. Additionally, I'm sure it is recognising the file, because if I type in an invalid Source, the player does not load at all.

I might not be explaining it very well so I have prepared a JSFiddle, here:

http://jsfiddle.net/zT3z2/

The two songs I have been using to test are:

• http://www.jezra.net/audio/skye_boat_song.ogg
• http://www.jezra.net/audio/star_of_the_county_down.ogg

HTML:

<input type="text" id="url" name="url" value="skye_boat_song.ogg" />
<br><br>

<audio id="sound1" preload="auto" src="http://www.jezra.net/audio/skye_boat_song.ogg"
autoplay controls></audio>
<div id="status">skye_boat_song.ogg | lorem ipsum</div>

JavaScript:

$('input#url').on('propertychange paste keyup', function () {

    var url = this.value;

    $("#status").html(url + " | lorem ipsum");
    changeAudio("http://jezra.net/audio/" + url);
});

function changeAudio(song) {
    audio = document.getElementById("sound1");
    audio.src = song;
    audio.load();
    audio.play();
}

$('input#url').keyup();

Answer 1

Here is a working fiddle that achieves what you're aiming for.

http://jsfiddle.net/newtriks/Fvh2x/

JS:

// http://goo.gl/k3oDc
// http://goo.gl/Ei0iX

var audioElement = document.getElementsByTagName('audio')[0];
var inputElement = document.getElementsByTagName('input')[0];

$('input').keyup(function () {
    if (event.keyCode == 13) {
        loadAndPlay(inputElement.value);
    }
});

function loadAndPlay(src) {
    audioElement.pause();
    audioElement.src = src;
    audioElement.load();
    audioElement.play();
}

loadAndPlay(inputElement.value);

HTML:

<div>
    <audio controls></audio>
</div>
<div>
    <input type="text" value="http://goo.gl/k3oDc" />
</div>

Simon