javascript - 使用输入框更改 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>

西蒙