오디오 파일을 재생하는 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 상자 버튼을 통해 이것을 존재시키고 싶습니다; 클릭하면 모든 기능이 실행됩니다. 본질적으로 나는 원한다. 추가 단계를 거치지 않고 자동으로 '사운드 파일 재생'을 클릭하십시오.

Answer 1

그래서 그 대신의 <audio> 요소 onclick, 당신은 단지 <audio> 요소를 재생할를 재생하는 재생 버튼을 보여주는?

이미 자바 스크립트가 있습니다. 함수에서 호출하면됩니다.

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();