使用輸入框更改HTML5音頻源

Question

嗨，其他堆棧用戶！

我正在嘗試創建一個音頻播放器，在其中將“源”鍵入到輸入框中。 到目前為止，我真的很喜歡它的工作方式，但是與其加載鍵入的文件，不如直接加載原始文件。 此外，我確定它可以識別該文件，因為如果鍵入無效的Source，則播放器將根本無法加載。

我可能沒有很好地解釋它，所以我在這里准備了一個JSFiddle：

http://jsfiddle.net/zT3z2/

我一直在測試的兩首歌是：

• 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

這是一個工作的小提琴，可以實現您的目標。

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>

西蒙