5

我发现这段代码可以在点击时播放音频文件，但它只允许播放一个音频文件。现在，我正在尝试重写代码，但它不起作用，我找不到问题。我是 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

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

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

于 2012-11-29T18:43:15.830 回答
0

您正在使用来自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/重新开始

于 2013-01-16T15:03:29.537 回答