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/audio/index.html

我开始在HTML中尝试使用音频，并且如果您需要更多内容，则发现本机<audio>非常慢且笨重，而不是在浏览器中播放单个歌曲文件。

Answer 2

您使用的是http://www.misfitgeek.com/play-sound-in-html5-and-cross-browser-support-with-backward-compatability/

中的代码

基本上它设置为播放一个声音。关键是：

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

这意味着带有id音频文件的输入部分的值将是播放的文件。您必须重写代码并使其动态化。如果你想为Android等写作，还有很多你不需要像现代化器那样的额外东西。

也许重新开始使用http://css-tricks.com/examples/SoundOnHover/

试图重写playAudio但不起作用

HTML：

的JavaScript：

2 个答案: