0

スタックユーザーの皆さん、こんにちは。

入力ボックスにソースを入力するオーディオプレーヤーを作成しようとしています。これまでのところ、私はそれが機能するはずの方法が本当に好きですが、入力されたファイルをロードする代わりに、元のファイルをリロードするだけです。さらに、無効なソースを入力するとプレーヤーがまったく読み込まれないため、ファイルを認識していると確信しています。

私はそれをうまく説明していないかもしれないので、ここでJSFiddleを準備しました：

http://jsfiddle.net/zT3z2/

私がテストに使用している2つの曲は次のとおりです。

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

1 に答える 1

3

これは、あなたが目指しているものを達成する実用的なフィドルです。

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>

サイモン

于 2013-02-19T13:04:16.243 に答える