Question

嗨伙伴堆栈用户！

我正在尝试创建一个音频播放器，您可以在输入框中键入Source。到目前为止，我真的很喜欢它的工作方式，但是不是加载输入的文件，而是重新加载原始文件。另外，我确定它正在识别该文件，因为如果我键入一个无效的源，则播放器根本不会加载。

我可能不会很好地解释它所以我准备了一个JSFiddle，在这里：

http://jsfiddle.net/zT3z2/

我用来测试的两首歌是：

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>

西蒙

使用输入框更改HTML5音频源

http://jsfiddle.net/zT3z2/

1 个答案: