javascript - 试图重写 playAudio 但不起作用

Question

我发现这段代码可以在点击时播放音频文件，但它只允许播放一个音频文件。现在，我试图重写代码，但它不起作用，我找不到问题所在。我是 JavaScript 的新手，所以如果您有更好的解决方案，请告诉我。

为了理解我想要完成的事情，这是我的概念:我正在尝试为移动设备(iOS 和 Android)制作一个基于网络的应用程序， children 可以在其中混合声音来制作他们自己的歌曲。他们可以将声音拖放到将播放所有声音的时间线中。但在拖动它们之前，他们还可以播放它们(这样他们就可以在将它们拖动到时间线之前通过单击包含图像的按钮听到声音)。

这是原始的 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");
        }
    }
   }
 };

Answer 1

我知道如果您是 JavaScript 的新手，这可能有点过分，但我绝对会建议您看一下 Web Audio API: http://chromium.googlecode.com/svn/trunk/samples/audio/index.html

我已经开始尝试使用 HTML 格式的音频并找到了原生的 <audio>与在浏览器中播放单个歌曲文件相比，如果您需要更多，它会非常缓慢和笨拙。