เสียงประกอบใน JavaScript / HTML5


316

ฉันกำลังใช้ HTML5 กับเกมโปรแกรม อุปสรรคที่ฉันพบตอนนี้คือวิธีเล่นเอฟเฟกต์เสียง

ข้อกำหนดเฉพาะมีจำนวนน้อย:

  • เล่นและผสมเสียงหลาย ๆ
  • เล่นตัวอย่างเดียวกันหลายครั้งอาจเล่นทับกัน
  • ขัดจังหวะการเล่นตัวอย่างทุกจุด
  • ควรเล่นไฟล์ WAV ที่มี PCM แบบดิบ (คุณภาพต่ำ) แต่ฉันสามารถแปลงไฟล์เหล่านี้ได้แน่นอน

วิธีแรกของฉันคือการใช้<audio>องค์ประกอบHTML5 และกำหนดเอฟเฟกต์เสียงทั้งหมดในหน้าของฉัน Firefox เล่นไฟล์ WAV เพียงลูกพีช แต่การโทร#playหลายครั้งไม่ได้เล่นตัวอย่างหลาย ๆ ครั้ง จากความเข้าใจของฉันเกี่ยวกับข้อมูลจำเพาะ HTML5 <audio>องค์ประกอบยังติดตามสถานะการเล่นด้วยดังนั้นจึงอธิบายได้ว่าทำไม

ความคิดฉับพลันของฉันคือการโคลนองค์ประกอบเสียงดังนั้นฉันจึงสร้างไลบรารี JavaScript ขนาดเล็กต่อไปนี้ขึ้นมาเพื่อทำสิ่งนั้นสำหรับฉัน (ขึ้นอยู่กับ jQuery):

var Snd = {
  init: function() {
    $("audio").each(function() {
      var src = this.getAttribute('src');
      if (src.substring(0, 4) !== "snd/") { return; }
      // Cut out the basename (strip directory and extension)
      var name = src.substring(4, src.length - 4);
      // Create the helper function, which clones the audio object and plays it
      var Constructor = function() {};
      Constructor.prototype = this;
      Snd[name] = function() {
        var clone = new Constructor();
        clone.play();
        // Return the cloned element, so the caller can interrupt the sound effect
        return clone;
      };
    });
  }
};

ดังนั้นตอนนี้ฉันสามารถทำได้Snd.boom();จากคอนโซล Firebug และเล่นsnd/boom.wavแต่ฉันยังไม่สามารถเล่นตัวอย่างเดียวกันหลาย ๆ ครั้งได้ ดูเหมือนว่า<audio>องค์ประกอบนั้นเป็นคุณสมบัติการสตรีมมากกว่าสิ่งที่จะเล่นเอฟเฟกต์ด้วย

มีวิธีที่ฉลาดในการทำให้สิ่งนี้เกิดขึ้นว่าฉันขาดหายไปโดยเฉพาะอย่างยิ่งควรใช้เฉพาะ HTML5 และ JavaScript หรือไม่

ฉันควรพูดถึงว่าสภาพแวดล้อมการทดสอบของฉันคือ Firefox 3.5 บน Ubuntu 9.10 เบราว์เซอร์อื่น ๆ ที่ฉันได้ลอง - Opera, Midori, Chromium, Epiphany - ให้ผลลัพธ์ที่แตกต่าง บางคนไม่เล่นอะไรเลยและบางคนก็มีข้อยกเว้น


ฮะ! ฉันยังเปลี่ยนเกม Macintosh เก่าเป็น HTML5 สนใจที่จะเปิดเผยสิ่งที่คุณกำลังโคลน?
เงินที่จ่าย nerd

1
มันคือ Project ARASHI โคลนแห่งพายุ
Stéphan Kochen

เสียง "ผสม" หมายถึงอะไร
Mads Skjern

2
เสร็จไหม เห็นไหม
enyo

4
น่าเศร้าที่ไม่มี ฉันมีความสามารถพิเศษที่ยังไม่จบโครงการเวลาว่าง :( มี repo คอมไพล์สำหรับมัน แต่ฉันไม่ได้สัมผัสในปี: github.com/stephank/arashi-js
Stéphan Kochen

คำตอบ:


448

AudioวัตถุHTML5

คุณไม่จำเป็นต้องกังวลกับ<audio>องค์ประกอบ HTML 5 ช่วยให้คุณเข้าถึงAudioวัตถุโดยตรง:

var snd = new Audio("file.wav"); // buffers automatically when created
snd.play();

ไม่มีการสนับสนุนสำหรับการผสมในข้อมูลจำเพาะรุ่นปัจจุบัน

หากต้องการเล่นเสียงเดียวกันหลาย ๆ ครั้งให้สร้างAudioวัตถุหลายอินสแตนซ์ คุณสามารถตั้งค่าsnd.currentTime=0บนวัตถุหลังจากเล่นเสร็จแล้ว


เนื่องจากตัวสร้าง JS ไม่สนับสนุน<source>องค์ประกอบทางเลือกคุณควรใช้

(new Audio()).canPlayType("audio/ogg; codecs=vorbis")

เพื่อทดสอบว่าเบราว์เซอร์รองรับ Ogg Vorbis หรือไม่


หากคุณเขียนเกมหรือแอปเพลง (มากกว่าเพียงแค่ผู้เล่น), คุณจะต้องการใช้ที่สูงขึ้น Web Audio APIซึ่งขณะนี้ได้รับการสนับสนุนจากเบราว์เซอร์ส่วนใหญ่


18
Audioวัตถุถูกล็อคอัตโนมัติ พวกมันถูกออกแบบมาให้คล้ายคลึงกับImageวัตถุดังนั้นเทคนิคการโหลดภาพก่อนวัยเรียนจึงใช้งานกับเสียงได้เช่นกัน
Kornel

5
สิ่งนี้ยังทำงานบน iOS โปรดทราบว่าคุณต้องใช้การกระทำของผู้ใช้ (เช่นคลิกที่ปุ่ม) เพื่อเริ่มต้นเสียง คุณไม่สามารถทำได้snd.play()บน window.load ()
ฮัสกี้

1
ฉันยังคงใช้<audio>แท็กเพราะสามารถควบคุมได้มากกว่า แต่อย่างไรก็ตามขอบคุณสำหรับข้อมูล!
Derek 朕會功夫

2
ฉันต้องการวิธีนี้หากไม่ได้เพราะองค์ประกอบของ <audio> html5 อนุญาตสำหรับหลาย ๆ แหล่งดังนั้นหากเบราว์เซอร์ไม่รองรับ mp3 คุณสามารถย้อนกลับไปที่ ogg / wav มันจะต้องใช้เล่ห์เหลี่ยมบางอย่างในจาวาสคริปต์เพื่อให้บรรลุเดียวกัน
joelmdev

2
รองรับการเล่นอัตโนมัติบน iOS 6: คุณสามารถเริ่มต้นเสียงด้วย snd.play () ง่ายๆบน window.load ()
Pietro Polsinelli

36

WebAudio API โดย W3C

ตั้งแต่เดือนกรกฎาคมปี 2012 ตอนนี้WebAudio APIได้รับการสนับสนุนใน Chrome และอย่างน้อยก็มีบางส่วนที่สนับสนุนใน Firefox และได้รับการกำหนดให้เพิ่มลงใน IOS เป็นเวอร์ชัน 6

แม้ว่ามันจะแข็งแกร่งพอที่จะใช้โดยทางโปรแกรมสำหรับงานพื้นฐาน แต่องค์ประกอบเสียงก็ไม่ได้หมายถึงให้การสนับสนุนเสียงแบบเต็มสำหรับเกม ฯลฯ มันถูกออกแบบมาเพื่อให้สื่อชิ้นเดียวสามารถฝังในหน้าคล้ายกับ img แท็ก มีปัญหามากมายเกี่ยวกับการพยายามใช้แท็กเสียงสำหรับเกม:

  • บิลเวลาเป็นเรื่องปกติขององค์ประกอบเสียง
  • คุณต้องการองค์ประกอบเสียงสำหรับแต่ละอินสแตนซ์ของเสียง
  • กิจกรรมการโหลดยังไม่น่าเชื่อถือทั้งหมด
  • ไม่มีตัวควบคุมระดับเสียงทั่วไป, ไม่ซีดจาง, ไม่มีตัวกรอง / เอฟเฟกต์

ฉันใช้บทความเริ่มต้นใช้งานกับ WebAudioเพื่อเริ่มต้นใช้งาน WebAudio API Fieldrunners WebAudio กรณีศึกษานอกจากนี้ยังมีการอ่านที่ดี


นี่เป็นคำตอบที่ดีกว่าคำตอบที่ได้รับการยอมรับเนื่องจากมันมุ่งเน้นไปที่การแก้ไขปัญหาที่ถูกต้อง (WebAudio API) และสาเหตุที่องค์ประกอบเสียงไม่ได้เป็นทางออกที่ดีแทนที่จะพยายามแฮ็กโซลูชันที่ไม่ดีกับองค์ประกอบเสียง
ความผิดปกติ

29

howler.js

สำหรับการเขียนเกมหนึ่งของการแก้ปัญหาที่ดีที่สุดคือการใช้ห้องสมุดซึ่งจะช่วยแก้ปัญหาหลายอย่างที่เราต้องเผชิญเมื่อเขียนโค้ดสำหรับเว็บเช่นhowler.js howler.js สรุปWeb Audio APIที่ยอดเยี่ยม (แต่ระดับต่ำ) ลงในเฟรมเวิร์กที่ใช้งานง่าย มันจะพยายามถอยกลับไปที่องค์ประกอบเสียง HTML5หาก API ของ Web Audio ไม่พร้อมใช้งาน

var sound = new Howl({
  urls: ['sound.mp3', 'sound.ogg']
}).play();
// it also provides calls for spatial/3d audio effects (most browsers)
sound.pos3d(0.1,0.3,0.5);

wad.js

อีกหนึ่งห้องสมุดที่ยอดเยี่ยมคือwad.jsซึ่งเป็นประโยชน์อย่างยิ่งสำหรับการผลิตเสียง synth เช่นดนตรีและเอฟเฟกต์ ตัวอย่างเช่น:

var saw = new Wad({source : 'sawtooth'})
saw.play({
    volume  : 0.8,
    wait    : 0,     // Time in seconds between calling play() and actually triggering the note.
    loop    : false, // This overrides the value for loop on the constructor, if it was set. 
    pitch   : 'A4',  // A4 is 440 hertz.
    label   : 'A',   // A label that identifies this note.
    env     : {hold : 9001},
    panning : [1, -1, 10],
    filter  : {frequency : 900},
    delay   : {delayTime : .8}
})

เสียงสำหรับเกม

อีกไลบรารีที่คล้ายกับ Wad.js คือ " Sound for Games " ซึ่งจะให้ความสำคัญกับการสร้างเอฟเฟกต์มากขึ้นในขณะที่มีฟังก์ชั่นการทำงานที่คล้ายคลึงกันผ่าน API ที่ค่อนข้างแตกต่างกัน

function shootSound() {
  soundEffect(
    1046.5,           //frequency
    0,                //attack
    0.3,              //decay
    "sawtooth",       //waveform
    1,                //Volume
    -0.8,             //pan
    0,                //wait before playing
    1200,             //pitch bend amount
    false,            //reverse bend
    0,                //random pitch range
    25,               //dissonance
    [0.2, 0.2, 2000], //echo array: [delay, feedback, filter]
    undefined         //reverb array: [duration, decay, reverse?]
  );
}

สรุป

ห้องสมุดเหล่านี้มีคุณค่าดูไม่ว่าคุณจะต้องเล่นไฟล์เสียงเดียวหรืออาจสร้างโปรแกรมแก้ไขเพลงที่ใช้ HTML, เครื่องสร้างเอฟเฟกต์หรือวิดีโอเกม


ไม่สามารถแสดงความคิดเห็นเกี่ยวกับการพัฒนาเกมได้ แต่ฉันใช้สิ่งนี้ในการแสดงความคิดเห็นด้วยเสียงเล็กน้อยในอินเทอร์เฟซและเพื่อให้ใช้งานได้จริง รวดเร็วง่ายและเรียบง่าย
กำจัด Iculous

กรอบงานที่ดีจริงๆทำงานได้ดีบนมือถือเช่นกัน คุณจะเรียกมันด้วย touchstart ... แต่หลังจากที่ทำมันทำงานออกจากกล่อง :)
ฟิลิป

9

คุณอาจต้องการใช้สิ่งนี้เพื่อตรวจจับเสียง HTML 5 ในบางกรณี:

http://diveintohtml5.ep.io/everything.html

ฟังก์ชันตรวจจับ HTML 5 JS

function supportsAudio()
{
    var a = document.createElement('audio'); 
    return !!(a.canPlayType && a.canPlayType('audio/mpeg;').replace(/no/, ''));
}

ขอบคุณที่สังเกตสิ่งนี้ ฉันได้เรียนรู้วิธีการนี้จาก Has.js แต่ฉันพบว่ามันมีปัญหาบางอย่างใน Firefox และเห็นได้ชัดว่าใน Opera ด้วยตามซอร์สโค้ด Has.js (refs: github.com/phiggins42/has.js/issues/48 github.com/phiggins42/has.js/blob/master/detect/audio.js#L19 )
Stéphan Kochen

5

นี่คือวิธีการหนึ่งที่ทำให้สามารถเล่นเสียงเดียวกันได้พร้อมกัน รวมกับ preloader และคุณพร้อมแล้ว สิ่งนี้ใช้ได้กับ Firefox 17.0.1 เป็นอย่างน้อยยังไม่ได้ทดสอบกับสิ่งอื่น

// collection of sounds that are playing
var playing={};
// collection of sounds
var sounds={step:"knock.ogg",throw:"swing.ogg"};

// function that is used to play sounds
function player(x)
{
    var a,b;
    b=new Date();
    a=x+b.getTime();
    playing[a]=new Audio(sounds[x]);
    // with this we prevent playing-object from becoming a memory-monster:
    playing[a].onended=function(){delete playing[a]};
    playing[a].play();
}

ผูกสิ่งนี้กับปุ่มแป้นพิมพ์และสนุกกับ:

player("step");

ไม่ฉันไม่คิดว่าการสร้างวัตถุใหม่สำหรับการเล่นเสียงแต่ละรายการเป็นวิธีแก้ปัญหาเลย มันเป็นวิธีแก้ปัญหาที่รวดเร็วและสกปรก แต่สามารถทำได้ดีกว่า
Pawel

@ Pawel True ไม่ควรใช้วิธีนี้เป็นวิธีหลักในการเล่นเสียง แต่เท่าที่ฉันทราบหลักการในตัวอย่างเป็นวิธีเดียวในการเล่นเสียงเดียวกันมากกว่าหนึ่งครั้งพร้อมกันหรือตามที่ OP แสดงไว้ "การเล่นซ้ำซ้อน" (โดยไม่ต้องใช้ปลั๊กอินเบราว์เซอร์) การใช้งานจริงของฉันในโครงการปัจจุบันของฉันมีความซับซ้อนมากกว่าโค้ดตัวอย่างที่ฉันโพสต์
F-3000

4

เสียงเหมือนสิ่งที่คุณต้องการคือเสียงหลายช่องทาง สมมติว่าคุณมี 4 ช่องทาง (เช่นในเกม 16 บิตที่เก่าจริง ๆ ) ฉันยังไม่ได้เล่นกับคุณสมบัติเสียง HTML5 แต่คุณไม่ต้องการเพียงแค่องค์ประกอบเสียงและวงจรที่ใช้ การเล่นเอฟเฟกต์เสียงต่อไป คุณเคยลองไหม เกิดอะไรขึ้น? หากใช้งานได้: หากต้องการเล่นเสียงมากขึ้นพร้อมกันเพียงเพิ่มองค์ประกอบ <audio> เพิ่มเติม

ฉันทำสิ่งนี้มาก่อนโดยไม่มีองค์ประกอบ <audio> HTML5 โดยใช้วัตถุ Flash เล็กน้อยจากhttp://flash-mp3-player.net/ - ฉันเขียนคำถามทดสอบดนตรี ( http://webdeavour.appspot.com/ ) และ ใช้เพื่อเล่นคลิปเพลงเมื่อผู้ใช้คลิกปุ่มสำหรับคำถาม ตอนแรกฉันมีผู้เล่นหนึ่งคนต่อคำถามและเป็นไปได้ที่จะเล่นกับพวกเขาที่ด้านบนของกันและกันดังนั้นฉันจึงเปลี่ยนมันดังนั้นจึงมีผู้เล่นเพียงคนเดียวซึ่งฉันชี้ไปที่คลิปเพลงที่แตกต่างกัน


นั่นเป็นความคิดที่น่าสนใจในการใช้ & lt; audio & gt; องค์ประกอบเป็นช่องทาง เมื่อฉันวางองค์ประกอบสองอย่างลงบนหน้าหนึ่งฉันสามารถเล่นพร้อมกันได้ ดูเหมือนว่าการโคลนนิ่งที่ฉันทำไม่ได้ทำตามที่ฉันคาดไว้เพราะในรหัสดั้งเดิมของฉันการเล่นสองตัวอย่างก็ใช้งานได้ ไม่ใช่ตัวอย่างเดียวกันสองเท่า ฉันจะต้องทำการทดลองกับสิ่งนี้มากกว่านี้และจะได้ผลตอบกลับ!
Stéphan Kochen

ใช่อาจมีเหตุผลที่ลึกซึ้งว่าทำไมเรียกว่าโคลนและไม่คัดลอก บางทีโคลนนิ่งก็ยังคงแบ่งปันบางสิ่งกับต้นฉบับที่ป้องกันไม่ให้ทั้งคู่เล่นพร้อมกัน
Lee Kowalkowski

สำหรับการอ้างอิงการใช้องค์ประกอบ <audio> เดียวกันซ้ำไม่ได้อย่างน้อยใน Firefox คุณสามารถตั้งค่าแอตทริบิวต์ 'src' แต่จะไม่โหลดตัวอย่างอื่น
Stéphan Kochen

4

ดูที่ไซต์jai (-> mirror ) (อินเตอร์เฟสเสียง javascript) จากการดูที่แหล่งที่มาพวกเขาดูเหมือนจะโทรplay()ซ้ำ ๆ กันและพวกเขากล่าวว่าห้องสมุดของพวกเขาอาจเหมาะสมสำหรับใช้ในเกมที่ใช้ HTML5

คุณสามารถเริ่มเหตุการณ์เสียงหลายรายการพร้อมกันซึ่งสามารถใช้สำหรับสร้างเกม Javascript หรือมีเสียงพูดผ่านเพลงพื้นหลัง


3

หากต้องการเล่นตัวอย่างเดียวกันหลาย ๆ ครั้งเป็นไปไม่ได้ที่จะทำสิ่งนี้:

e.pause(); // Perhaps optional
e.currentTime = 0;
e.play();

( eเป็นองค์ประกอบเสียง)

บางทีฉันเข้าใจผิดปัญหาของคุณอย่างสมบูรณ์คุณต้องการให้เอฟเฟกต์เสียงเล่นหลาย ๆ ครั้งในเวลาเดียวกันหรือไม่? ถ้าอย่างนั้นนี่มันผิดทั้งหมด


ถูกต้องฉันต้องเล่นตัวอย่างเดียวกันหลาย ๆ ครั้งในเวลาเดียวกัน
Stéphan Kochen

ใช่สิ่งนี้เล่นอินสแตนซ์เดียวกันหลายครั้ง แต่สำหรับผู้ที่ดูคำตอบนี้โปรดทราบว่าสิ่งนี้ไม่ทำให้ "การเล่นซ้ำซ้อน" ดังเช่นคำที่ OP
แพทริคโรเบิร์ตส์

3

นี่คือความคิด โหลดเสียงทั้งหมดของคุณเพื่อให้ได้ระดับเสียงที่แน่นอนลงในองค์ประกอบเสียงเดี่ยว ๆ ที่ข้อมูล src เป็นตัวอย่างทั้งหมดของคุณในไฟล์เสียงที่ต่อเนื่องกัน (อาจต้องการความเงียบบางส่วนเพื่อให้คุณสามารถจับและตัดตัวอย่างด้วยการหมดเวลาน้อย ความเสี่ยงของการมีเลือดออกในตัวอย่างต่อไป) จากนั้นค้นหาตัวอย่างและเล่นเมื่อจำเป็น

หากคุณต้องการเล่นมากกว่าหนึ่งรายการคุณสามารถสร้างองค์ประกอบเสียงเพิ่มเติมด้วย src เดียวกันเพื่อให้แคชได้ ตอนนี้คุณมี "แทร็ก" หลายรายการอย่างมีประสิทธิภาพ คุณสามารถใช้กลุ่มของแทร็กกับรูปแบบการจัดสรรทรัพยากรที่คุณโปรดปรานเช่น Round Robin ฯลฯ

คุณสามารถระบุตัวเลือกอื่น ๆ เช่นการจัดคิวเสียงลงในแทร็กเพื่อเล่นเมื่อทรัพยากรนั้นพร้อมใช้งานหรือตัดตัวอย่างที่กำลังเล่นอยู่


2

http://robert.ocallahan.org/2011/11/latency-of-html5-sounds.html

http://people.mozilla.org/~roc/audio-latency-repeating.html

ทำงานได้ดีใน Firefox และ Chrome สำหรับฉัน

หากต้องการหยุดเสียงที่คุณเริ่มให้ทำ var sound = document.getElementById ("shot") cloneNode (true); sound.play (); และในภายหลัง sound.pause ();


2

ฉันอยากจะแนะนำให้ใช้SoundJSห้องสมุดที่ฉันช่วยพัฒนา ช่วยให้คุณสามารถเขียนรหัสฐานเดียวที่ใช้งานได้ทุกที่ด้วย SoundJS เลือกเสียงเว็บเสียง html หรือเสียงแฟลชตามความเหมาะสม

มันจะช่วยให้คุณทำทุกสิ่งที่คุณต้องการ:

  • เล่นและผสมเสียงหลาย ๆ
  • เล่นตัวอย่างเดียวกันหลายครั้งอาจเล่นทับกัน
  • การเล่นตัวอย่างขัดจังหวะ ณ จุดใดก็ได้
  • เล่นไฟล์ WAV ที่มี (ขึ้นอยู่กับการสนับสนุนเบราว์เซอร์)

หวังว่าจะช่วย


ห้องสมุดนั้นยอดเยี่ยมมากฉันขุด sfx generator จริงๆ เวลาในการทำเว็บ Saiko ให้ดาวน์โหลดสำหรับทุกคนที่สนใจ
RozzA

1

ไม่สามารถทำการเล่นหลายช็อตด้วย<audio>องค์ประกอบเดียวได้ คุณต้องใช้องค์ประกอบหลายอย่างสำหรับสิ่งนี้


1

ฉันพบปัญหานี้ในขณะที่ตั้งโปรแกรมตัวสร้างการ์ดเพลง เริ่มด้วยห้องสมุดที่แตกต่างกัน แต่ทุกครั้งที่มีความผิดพลาดอย่างใด ความล่าช้าในการใช้งานเสียงปกติไม่ดีไม่มีการเล่นหลายรายการ ... ในที่สุดก็จบลงด้วยการใช้ lowlag library + soundmanager:

http://lowlag.alienbill.com/ และ http://www.schillmania.com/projects/soundmanager2/

คุณสามารถตรวจสอบการใช้งานได้ที่นี่: http://musicbox.grit.it/

ฉันสร้างไฟล์ wav + ogg สำหรับการเล่นหลายเบราว์เซอร์ เครื่องเล่นเพลงนี้ใช้งานได้ดีบน iPad, iphone, Nexus, mac, pc, ... เหมาะสำหรับฉัน


นั่นเป็นแอพกล่องดนตรีที่ดี! คุณมีที่เก็บคอมไพล์หรือไม่? ฉันอาจใช้กับเด็ก ๆ ของเรา!
icarito

0

ฉันรู้ว่านี่เป็นแฮ็คทั้งหมด แต่คิดว่าฉันควรเพิ่มไลบรารี่เสียงโอเพ่นซอร์สตัวอย่างนี้ที่ฉันวางไว้บน github สักครู่แล้ว ...

https://github.com/run-time/jThump

หลังจากคลิกที่ลิงค์ด้านล่างพิมพ์บนปุ่มโฮมแถวเพื่อเล่น riff บลูส์ (เช่นพิมพ์หลายคีย์พร้อมกันเป็นต้น)

ตัวอย่างการใช้ห้องสมุด jThump >> http://davealger.com/apps/jthump/

โดยทั่วไปแล้วจะทำงานโดยการสร้าง<iframe>องค์ประกอบที่มองไม่เห็นซึ่งโหลดหน้าเว็บที่เล่นเสียงบน Ready ()

มันไม่เหมาะแต่คุณสามารถ +1 โซลูชันนี้โดยใช้ความคิดสร้างสรรค์เพียงอย่างเดียว (และความจริงที่ว่ามันเป็นโอเพ่นซอร์สและทำงานในเบราว์เซอร์ใด ๆ ที่ฉันได้ลองทำ) ฉันหวังว่านี่จะช่วยให้คนอื่นค้นหาแนวคิดบางอย่างน้อย

:)


ทำไมบางคนลงคะแนนนี้ ดูเหมือนว่าตัวเลือกที่ทำงานได้กับฉัน
jtrick

มันเป็นคำตอบที่ค่อนข้างแฮ็ก แต่ฉันได้ใช้ไลบรารี่
DaveAlger

0

คำตอบที่เลือกจะใช้ได้กับทุกสิ่งยกเว้น IE ฉันเขียนบทเรียนเกี่ยวกับวิธีที่จะทำให้มันทำงานข้ามเบราว์เซอร์ = http://www.andy-howard.com/how-to-play-sounds-cross-browser-including-ie/index.html

นี่คือฟังก์ชั่นที่ฉันเขียน;

function playSomeSounds(soundPath)
 {

 var trident = !!navigator.userAgent.match(/Trident\/7.0/);
 var net = !!navigator.userAgent.match(/.NET4.0E/);
 var IE11 = trident && net
 var IEold = ( navigator.userAgent.match(/MSIE/i) ? true : false );
 if(IE11 || IEold){
 document.all.sound.src = soundPath;
 }
 else
 {
 var snd = new Audio(soundPath); // buffers automatically when created
 snd.play();
 }
 };

คุณต้องเพิ่มแท็กต่อไปนี้ในหน้า html:

<bgsound id="sound">

ในที่สุดคุณสามารถเรียกใช้ฟังก์ชั่นและเพียงแค่ผ่านเส้นทางที่นี่:

playSomeSounds("sounds/welcome.wav");

0

คุณสามารถลองAudioContextใช้งานได้เสมอโดยมีการสนับสนุนที่ จำกัด แต่เป็นส่วนหนึ่งของร่างการทำงานของเสียงเว็บ API มันอาจจะคุ้มค่าถ้าคุณวางแผนที่จะปล่อยบางอย่างในอนาคต และถ้าคุณเพียงแค่วางโปรแกรมสำหรับ Chrome และ Firefox คุณก็จะเป็นทองคำ


0

var AudioContextFunc = window.AudioContext || window.webkitAudioContext;
var audioContext = new AudioContextFunc();
var player=new WebAudioFontPlayer();
var instrumVox,instrumApplause;
var drumClap,drumLowTom,drumHighTom,drumSnare,drumKick,drumCrash;
loadDrum(21,function(s){drumClap=s;});
loadDrum(30,function(s){drumLowTom=s;});
loadDrum(50,function(s){drumHighTom=s;});
loadDrum(15,function(s){drumSnare=s;});
loadDrum(5,function(s){drumKick=s;});
loadDrum(70,function(s){drumCrash=s;});
loadInstrument(594,function(s){instrumVox=s;});
loadInstrument(1367,function(s){instrumApplause=s;});
function loadDrum(n,callback){
  var info=player.loader.drumInfo(n);
  player.loader.startLoad(audioContext, info.url, info.variable);
  player.loader.waitLoad(function () {callback(window[info.variable])});
}
function loadInstrument(n,callback){
  var info=player.loader.instrumentInfo(n);
  player.loader.startLoad(audioContext, info.url, info.variable);
  player.loader.waitLoad(function () {callback(window[info.variable])});
}
function uhoh(){
  var when=audioContext.currentTime;
  var b=0.1;
  player.queueWaveTable(audioContext, audioContext.destination, instrumVox, when+b*0, 60, b*1);
  player.queueWaveTable(audioContext, audioContext.destination, instrumVox, when+b*3, 56, b*4);
}
function applause(){
  player.queueWaveTable(audioContext, audioContext.destination, instrumApplause, audioContext.currentTime, 54, 3);
}
function badumtss(){
  var when=audioContext.currentTime;
  var b=0.11;
  player.queueWaveTable(audioContext, audioContext.destination, drumSnare, when+b*0, drumSnare.zones[0].keyRangeLow, 3.5);
  player.queueWaveTable(audioContext, audioContext.destination, drumLowTom, when+b*0, drumLowTom.zones[0].keyRangeLow, 3.5);
  player.queueWaveTable(audioContext, audioContext.destination, drumSnare, when+b*1, drumSnare.zones[0].keyRangeLow, 3.5);
  player.queueWaveTable(audioContext, audioContext.destination, drumHighTom, when+b*1, drumHighTom.zones[0].keyRangeLow, 3.5);
  player.queueWaveTable(audioContext, audioContext.destination, drumSnare, when+b*3, drumSnare.zones[0].keyRangeLow, 3.5);
  player.queueWaveTable(audioContext, audioContext.destination, drumKick, when+b*3, drumKick.zones[0].keyRangeLow, 3.5);
  player.queueWaveTable(audioContext, audioContext.destination, drumCrash, when+b*3, drumCrash.zones[0].keyRangeLow, 3.5);
}
<script src='https://surikov.github.io/webaudiofont/npm/dist/WebAudioFontPlayer.js'></script>
<button onclick='badumtss();'>badumtss</button>
<button onclick='uhoh();'>uhoh</button>
<button onclick='applause();'>applause</button>
<br/><a href='https://github.com/surikov/webaudiofont'>More sounds</a>


0

Web Audio API เป็นเครื่องมือที่เหมาะสมสำหรับงานนี้ มีการทำงานเล็กน้อยในการโหลดไฟล์เสียงและเล่นมัน โชคดีที่มีห้องสมุดอยู่มากมายที่ทำให้งานง่ายขึ้น ฉันยังได้สร้างห้องสมุดชื่อมัสกันคุณสามารถตรวจสอบสิ่งนั้นได้เช่นกัน

ขณะนี้มันรองรับเอฟเฟกต์สีซีดจางเท่านั้นและฉันกำลังทำงานกับสิ่งอื่น ๆ เช่นการกระจายพื้นที่ 3 มิติ

โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.