Changing HTML5 Audio source with Input box

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:

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

newtriks · Accepted Answer · 2013-02-19 13:04:16Z

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

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

JS:

// https://dl.dropbox.com/u/236707/Kool_G_Rap_and_Nas_-_Fast_Life_(Vinyl_Reanimators_Remix).mp3
// https://dl.dropbox.com/u/236707/Non-Phixion_-_Cult_Leader.mp3

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="https://dl.dropbox.com/u/236707/Kool_G_Rap_and_Nas_-_Fast_Life_(Vinyl_Reanimators_Remix).mp3" />
</div>

Simon

Collectives™ on Stack Overflow

Changing HTML5 Audio source with Input box

http://jsfiddle.net/zT3z2/

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related