使用输入框更改HTML5音频源

Changing HTML5 Audio source with Input box

本文关键字：HTML5 音频 输入      更新时间：2023-09-26

嗨，各位堆栈用户！

我正在尝试创建一个音频播放器，您可以在输入框中键入Source。到目前为止，我真的很喜欢它的工作方式，但是它没有加载键入的文件，而是重新加载原始文件。此外，我确信它正在识别该文件，因为如果我键入无效的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();

这是一把可以实现目标的小提琴。

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

相关文章：