JavaScript函數播放音頻文件

Question

我想要一個乾淨的方式來編寫一個JavaScript函數，該函數在特定的點擊觸發到一個#div元素並觸發一個聲音文件，沒有循環。無論如何編寫一個抓取聲音文件的函數，播放它然後停下來。它將是每次點擊存在的大量功能的一部分，並分配給用戶完成的自定義點擊次數;在一個特定的#main_div按鈕上。

目前我有一個解決方案，在功能中使用.show .hide來顯示'播放按鈕'。

JS：

function function8() { 
    $("#area1").hide(0).delay(1500).show(0); 
    $("#area2").hide(0).delay(1500).show(0); 
    $("#sound1").show(0).delay(1500).hide(0); // This one 
// I would like the above to directly play the sound when fired. Not overlay a new play button. 

加價：

<div id="sound1"><div> 
<audio id="id1" src="01.mp3"></audio> 
<button onClick="document.getElementById("id1").play()">Play</button> 
<button onClick="document.getElementById("id1").pause()">Stop</button> 
</div></div> 

但是這需要一個額外的 '點擊' 播放;並且我也不想要特定於此音頻播放的按鈕。我希望通過主#main_div框按鈕來實現這個功能。點擊時所有功能都會發生;基本上我想要;比如點擊= 3自動播放聲音文件，而不需要額外的步驟。

Answer 1

因此，而不是顯示一個播放按鈕，它起着<audio>元素onclick，你只想打<audio>元素？

那麼你已經有了JavaScript。你只需要在你的函數中調用它。

function function8() { 

    // this code shows some areas 
    $("#area1").hide(0).delay(1500).show(0); 
    $("#area2").hide(0).delay(1500).show(0); 

    // this code hides the sound player and control buttons 
    $("#sound1").show(0).delay(1500).hide(0); 

    // this is the same line you have bound to your play button 
    // it simply plays the audio element 
    document.getElementById("id1").play(); 
} 

此外，您正在使用jQuery！所以不需要document.getElementById瘋狂。

$("#id1").get(0).play(); 

Answer 2

我正在使用此功能在事物相互碰撞時播放聲音。你可以在http://www.jellyrobotics.com/2013/01/16/box-2d/看到它的一個例子。 overlapMax變量允許一次播放聲音文件的多次迭代。換句話說，您可以在前一個實例完成之前再次開始播放它。

var JellySoundInstace = 0; 
var JellySound = function(audiofile) 
    { 
    // should be optional variable because not all objects have the ability 
    // to play multiple times and possibly overlap. For example, the explosion sound 
    // from a single tank blowing up will only play one time for that tank instance 
    // 
    var overlapMax = 3; 


    // PRIVATE instance variables here 
    // 
    var tracks = new Array(); 
    var soundID = "jellysound" + JellySoundInstace++; 
    var track = 0; 


    this.load = function(audiofile) 
     { 
     var i; 

     for (i=0; i<overlapMax; i++) 
      { 
      var object = null; 

      if (ieVersion(8)) 
       { 
       object = document.createElement('div'); 

       var iesound = ''; 
       iesound = iesound + '<object id="'+soundID+'track'+i+'" type="audio/x-wav" data="'+audiofile+'" width="200" height="16">'; 
       iesound = iesound + '<param name="src" value="'+audiofile+'" />'; 
       iesound = iesound + '<param name="volume" value="2" />'; 
       iesound = iesound + '<param name="autoplay" value="false" />'; 
       iesound = iesound + '<param name="autostart" value="0" />'; 
       iesound = iesound + '<param name="pluginurl" value="http://www.apple.com/quicktime/download/" />'; 
       iesound = iesound + '</object>'; 

       object.id = soundID+'track'+i+'div'; 
       object.innerHTML = iesound; 
       object.style.visibility = 'hidden'; 
       object.style.position = 'absolute'; 
       object.style.left = '0px'; 
       object.style.top = '0px'; 
       } 
      else 
       { 
       object = document.createElement('audio'); 
       object.setAttribute('id',soundID+'track'+i); 
       object.setAttribute('src',audiofile); 
       } 

      document.body.appendChild(object); 

      var newsound = document.getElementById(soundID+'track'+i); 

      // needs to be handled with a method & params 
      // 
      newsound.volume = 0.02; 

      tracks.push(newsound); 
      } 
     } 


    this.play = function() 
     { 
     if (tracks.length==0) 
      return; 

     if (ieVersion(8)) 
      { 
      tracks[track].Play(); 
      track++; 
      track%=tracks.length; 
      return; 
      } 

     tracks[track].play(); 
     track++; 
     track%=tracks.length; 
     } 

    this.load(audiofile); 

    return this; 
    } 

function ieVersion(iecheck) 
    { 
    if (!(/MSIE (\d+\.\d+);/.test(navigator.userAgent))) 
     return 0; 

    var ieversion=new Number(RegExp.$1) // capture x.x portion and store as a number 

    return (ieversion <= iecheck); 
    } 

// Sample Usage 
// 
var collisionSound = new JellySound("dink.wav"); 

collisionSound.play();