лучший способ зациклить звук в браузере?

Я делаю сайт с множеством многодорожечных звуковых петель. Мне интересно, как лучше всего реализовать их (с помощью javascript и т. Д.)?

я должен использовать: -flash или другую связанную флеш-библиотеку

or

-html5 аудио

или что-то другое?

очень важно, чтобы звуковые петли были бесшовными

какие для этого есть хорошие библиотеки? Раньше я пользовался звуковым менеджером. Файлы в основном будут в формате mp3.


audio html5-audio flash soundmanager2
person pepper    schedule 08.03.2013    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Вы можете использовать API веб-аудио, если хотите придерживаться браузеров WebKit.

Вот некоторый шаблонный "абстрагированный" код для начала. Требуется сервер.

<!DOCTYPE html>
<meta charset="UTF-8">
<title></title>

<div id="kickDrum"> </div>    // click and will loop
<div id="snareDrum"></div>    // Won't loop




 <script>
 var kickDrum = new audioApiKey("kickDrum","kick.mp3",true);     // first argument is the div name, the next is the audio file name & url the last parameter is loop on/off. true means loop on

 var snareDrum = new audioApiKey("snareDrum","snare.mp3", false);





 // Below is the abstracted guts.

 var context = new webkitAudioContext();

 function audioApiKey(domNode,fileDirectory,loopOnOff) {
    this.domNode = domNode;
    this.fileDirectory = fileDirectory;
    this.loopOnOff = loopOnOff;                      
    var bufferFunctionName = bufferFunctionName;
    var incomingBuffer;
    var savedBuffer;
    var xhr;
       bufferFunctionName = function () {
       var source = context.createBufferSource();
       source.buffer = savedBuffer;
       source.loop = loopOnOff;
       source.connect(context.destination);
       source.noteOn(0); // Play sound immediately
       };
    var xhr = new XMLHttpRequest();
    xhr.open('get',fileDirectory, true);
    xhr.responseType = 'arraybuffer';
    xhr.onload = function () {
    context.decodeAudioData(xhr.response,
       function(incomingBuffer) {
       savedBuffer = incomingBuffer;
       var note = document.getElementById(domNode);
       note.addEventListener("click", bufferFunctionName , false);
         }
      );
   };
 xhr.send();
 };

 </script>

CSS

<style>

#kickDrum {
   background-color:orange;
   position:absolute;
   top:25%;
   left:25%;
   width: 200px;
   height:200px;
   border-radius:120px;
   border-style:solid;
   border-width:15px;
   border-color:grey;
 } 

#snareDrum {
   background-color:orange;
   position:absolute;
   top:25%;
   left:50%;     
   width: 200px;
   height:200px;
   border-radius:120px;
   border-style:solid;
   border-width:15px;
   border-color:grey;
 }

</style>
person William    schedule 13.03.2013
comment
это фантастика, но работает ли это только в хроме? По какой-то причине это единственное место, где я что-то слышу - person pepper; 15.03.2013

arrow_upward
1
arrow_downward

Если вы не против использования Flash, вы можете импортировать звук, прослушать событие COMPLETE, а затем воспроизвести его снова ...

import flash.events.Event; 
import flash.media.Sound; 
import flash.net.URLRequest; 

var snd:Sound = new Sound(); 
var req:URLRequest = new URLRequest("smallSound.mp3"); 
snd.load(req); 

var channel:SoundChannel = snd.play(); 
channel.addEventListener(Event.SOUND_COMPLETE, onPlaybackComplete); 

public function onPlaybackComplete(event:Event) 
{ 
    trace("The sound has finished playing.");
    snd.play(); 
}
person whodeee    schedule 08.03.2013