5

このコードは onClick でオーディオ ファイルを再生することがわかりましたが、1 つのオーディオ ファイルしか再生できません。今、コードを書き直そうとしていますが、うまくいかず、問題が見つかりません。私はJavaScriptが初めてなので、より良い解決策があれば教えてください。

私が達成しようとしていることを理解するために、これが私のコンセプトです。私は、子供たちがサウンドをミックスして自分の歌を作ることができるモバイル (iOS および Android) 用の Web ベースのアプリケーションを作成しようとしています。すべてのサウンドを再生するタイムラインにサウンドをドラッグ アンド ドロップできます。ただし、ドラッグする前に、それらを再生することもできます (画像を含むボタンをクリックすることで、タイムラインにドラッグする前にサウンドを聞くことができます)。

これは元の HTML です。

    <input id="audiofile" type="text" value="" style="display: none;"/>
    <button id="myElement" class="dndplay" onClick="playAudio();" draggable="true"></button>
    <button id="myElement" class="dndplay" onClick="playAudio();" draggable="true"></button>   

    <audio id="myaudio"></audio>

これは元の JavaScript です。

    var currentFile = "";

    function playAudio() {
        var oAudio = document.getElementById('myaudio');

       // See if we already loaded this audio file.
      if ($("#audiofile").val() !== currentFile) {
          oAudio.src = $("#audiofile").val();
          currentFile = $("#audiofile").val();
      }

      var test = $("#myaudio");
      test.src = $("#audiofile").val();
      oAudio.play();   
  }

  $(function() {
      if (Modernizr.audio) {
      if (Modernizr.audio.ogg) {
          $("#audiofile").val("sounds/Stoomloco_Lunetten.ogg"); 
      }
      if (Modernizr.audio.mp3) {
          $("#audiofile").val("sounds/Stoomloco_Lunetten.mp3");
      }
  }
});

そして、これは私が書いたコードですが、動作しません:

HTML:

    <input id="audioOne" type="text" value="" style="display: none;"/>
    <button id="framentOne" class="dndplay" onClick="playAudio1" draggable="true"></button>

    <input id="audioTwo" type="text" value="" style="display: none;"/>
    <button id="fragementTwo" class="dndplay" onClick="playAudio2" draggable="true"></button>   

    <audio id="myaudio1"></audio>
    <audio id="myaudio2"></audio>

JavaScript:

 var currentFile = "";

 var playAudio1 = {

   playAudioOne: function() {
      var fragmentOne = document.getElementById('myaudio1');

      // See if we already loaded this audio file.
      if ((modernizr1, "#audioOne").val() !== currentFile) {
        fragmentOne.src = (modernizr1, "#audioOne").val();
        currentFile = (modernizr1, "#audioOne").val();
    }

    var test = (modernizr1, "#myaudio1");
    test.src = (modernizr1, "#audioOne").val();
    fragmentOne.play();   
},


modernizr1: function() {
    if (Modernizr.audio) {
        if (Modernizr.audio.ogg) {
            ("#audioOne").val("sounds/Stoomloco_Lunetten.ogg"); 
        }
        if (Modernizr.audio.mp3) {
            ("#audioOne").val("sounds/Stoomloco_Lunetten.mp3");
        }
    }
   }
  };

var playAudio2 = {
playAudioTwo: function() {
    var fragmentTwo = document.getElementById('myaudio2');

    // See if we already loaded this audio file.
    if ((modernizr2, "#audioTwo").val() !== currentFile) {
        fragmentTwo.src = (modernizr2, "#audioTwo").val();
        currentFile = (mdernizr2, "#audioTwo").val();
    }

    var test = (modernizr2, "#myaudio2");
    test.src = (modernizr2, "#audioTwo").val();
    fragmentTwo.play();   
},

modernizr2: function() {
    if (Modernizr.audio) {
        if (Modernizr.audio.ogg) {
            ("#audioTwo").val("sounds/Marsmanplein_Ventilator.ogg"); 
        }
        if (Modernizr.audio.mp3) {
            ("#audioTwo").val("sounds/Marsmanplein_Ventilator.mp3");
        }
    }
   }
 };
4

2 に答える 2

0

http://www.misfitgeek.com/play-sound-in-html5-and-cross-browser-support-with-backward-compatability/のコードを使用しています

基本的には1音鳴らすように設定されています。キーラインは次のとおりです。

oAudio.src = $("#audiofile").val();

これは、id オーディオ ファイルの入力セクションの値が再生されるファイルになることを意味します。コードを書き直して動的にする必要があります。アンドロイドなどのために書きたい場合、モダナイザーのように必要のない余分なものがたくさんあります.

多分http://css-tricks.com/examples/SoundOnHover/からやり直してください

于 2013-01-16T15:03:29.537 に答える
0

JavaScript を初めて使用する場合、これは少し多すぎるかもしれませんが、Web Audio API を確認することをお勧めします: http://chromium.googlecode.com/svn/trunk/samples/ audio/index.html

私は HTML でオーディオの実験を始めましたが<audio>、ブラウザで単一の曲ファイルを再生するよりも、ネイティブが非常に遅く、さらに必要な場合は扱いにくいことがわかりました。

于 2012-11-29T18:43:15.830 に答える