1

友達、

私は基本的に、クリックされた画像のIDを取得して対応するオーディオファイルを再生する単純なオーディオプレーヤーを構築しようとしています。ここに私がいるところです... 運が悪いです。

私は何時間もこれを行うためのエレガントな方法を見つけようとしてきました.

ありがとう！

<script type="text/javascript"> 
$(function() {
    $(".playback").click(function(){
        var selectedAudio = $(this).attr("id");
        var myAudio = document.getElementById(selectedAudio);
        myAudio.play();
});
</script>


<body>
    <audio id="boardroom" preload="auto"><source src="boardroom.mp3" type="audio/mpeg" /></audio>
    <audio id="bathroom" preload="auto"><source src="bathroom.mp3" type="audio/mpeg" /></audio>
    <audio id="livingroom" preload="auto"><source src="livingroom.mp3" type="audio/mpeg" /></audio>

    <img class="playback" id="boardroom" src="images/audio.png">


</body
4

2 に答える 2

1

クラス「再生」のクリックを探していますが、画像には「再生」のクラスがあります

それかもしれない

于 2012-12-01T00:32:23.813 に答える
1

2つのこと。

  1. idドキュメント内の複数の要素に同じものを使用しないでください。それらは一意であると想定されており、一意でない場合に悪いことが発生する可能性があります。あなたの場合、イメージとオーディオ要素が同じ ID を共有しています。これは悪いことです。document.getElementById複数の要素が ID を共有している場合、どの要素を見つけるかをどのように知るのでしょうか? 一方を使用して他方を見つけることはできますが、それらを異なるものにする必要があります。 <img id="somename">そして<audio id="somename-audio">、例えば。

  2. フィドルのオーディオ ソースがオーディオ ファイルを指していませんでした。音声ファイルに関する Web ページを指していました。実際のオーディオ ファイルを指すようにリンクを修正しました。

作業バージョン: http://jsfiddle.net/Pzsax/2/

HTML:

<audio id="cello-audio" preload="auto">
    <source src="http://upload.wikimedia.org/wikipedia/commons/4/43/JOHN_MICHEL_CELLO-J_S_BACH_CELLO_SUITE_1_in_G_Prelude.ogg" type="audio/mpeg" />
</audio>

<img class="playback" id="cello" src="http://upload.wikimedia.org/wikipedia/commons/thumb/4/47/Sound-icon.svg/50px-Sound-icon.svg.png">​

JS:

$(".playback").click(function() {
    var selectedAudio = $(this).attr("id");
    var myAudio = document.getElementById(selectedAudio + "-audio");
    myAudio.play();
});​

または、jQuery を使用しているように見えるので、単純に次のようになります。

$(".playback").click(function() {
    var selectedAudio = $(this).attr("id");
    var myAudio = $('#' + selectedAudio + "-audio");
    myAudio.play();
});​

最後に、ID に依存して意味のあるデータを渡すのではなく、おそらくデータ属性を使用すると、サウンドの名前などのデータのビットを、それらを再生するボタンにエンコードできます。

于 2012-12-01T09:56:36.030 に答える