试图重写playAudio但不起作用

Question

我发现这个代码在onClick上播放音频文件,但它只允许播放一个音频文件.现在,我正在尝试重写代码,但它不起作用,我找不到问题.我是JavaScript的新手,所以如果你有更好的解决方案,请告诉我.

为了理解我想要实现的目标,这就是我的理念:我正在尝试为移动设备(iOS和Android)制作一个基于网络的应用程序,孩子们可以将声音混合起来制作自己的歌曲.他们可以将声音拖放到播放所有声音的时间线中.但在他们拖动它们之前,它们也可以播放它们(因此它们可以在将它们拖入时间线之前通过点击包含图像的按钮来听到声音).

这是原始的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/音频/index.html

我已经开始尝试 HTML 中的音频，发现如果您需要更多音频，那么本地音频<audio>比在浏览器中播放一首歌曲文件要慢且笨重。