জাভাস্ক্রিপ্ট / এইচটিএমএল 5 এর সাউন্ড এফেক্টস


316

আমি প্রোগ্রাম গেমগুলিতে এইচটিএমএল 5 ব্যবহার করছি; আমি এখন যে বাধা ফেলেছি তা হ'ল কীভাবে সাউন্ড ইফেক্টগুলি খেলতে হয় play

নির্দিষ্ট প্রয়োজনীয়তা সংখ্যায় কম:

  • একাধিক শব্দ প্লে এবং মিশ্রিত করুন,
  • একই নমুনাটি একাধিক বার খেলুন, সম্ভবত প্লেব্যাকগুলি ওভারল্যাপ করে,
  • কোনও বিন্দুতে কোনও নমুনার বাধা প্লেব্যাক,
  • সাধারণত (নিম্নমানের) কাঁচা পিসিএমযুক্ত ডাব্লুএইভি ফাইলগুলি খেলুন তবে আমি অবশ্যই এটি রূপান্তর করতে পারি।

আমার প্রথম পদ্ধতিরটি ছিল HTML5 <audio>উপাদানটি ব্যবহার করা এবং আমার পৃষ্ঠায় সমস্ত শব্দ প্রভাব সংজ্ঞায়িত করা। ফায়ারফক্স ডাব্লুএইভি ফাইলগুলি কেবল পীচি বাজায়, তবে #playএকাধিকবার কল করা সত্যিই একাধিকবার নমুনাটি খেলবে না। এইচটিএমএল 5 অনুধাবন সম্পর্কে আমার ধারণা থেকে, <audio>উপাদানটি প্লেব্যাকের স্থিতিও ট্র্যাক করে, যাতে এটি কেন ব্যাখ্যা করে।

আমার তাত্ক্ষণিক চিন্তাটি অডিও উপাদানগুলির ক্লোন করা ছিল, সুতরাং আমি এটি করার জন্য নীচের ক্ষুদ্র জাভাস্ক্রিপ্ট লাইব্রেরি তৈরি করেছি (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();ফায়ারব্যাগ কনসোল থেকে খেলতে পারি এবং খেলতে পারি snd/boom.wav, তবে আমি এখনও একই নমুনা একাধিক বার খেলতে পারি না। দেখে মনে হচ্ছে যে <audio>উপাদানটি সাউন্ড ইফেক্টগুলি প্লে করার পরিবর্তে কিছু স্ট্রিমিং বৈশিষ্ট্যযুক্ত।

আমি অনুপস্থিত, এটি কেবলমাত্র এইচটিএমএল 5 এবং জাভাস্ক্রিপ্ট ব্যবহার করে এমনটি করার কোনও চতুর উপায় আছে?

আমার এটিও উল্লেখ করা উচিত, আমার পরীক্ষার পরিবেশটি উবুন্টু 9.10-তে ফায়ারফক্স 3.5। অন্যান্য ব্রাউজারগুলি আমি চেষ্টা করেছি - অপেরা, মিডোরি, ক্রোমিয়াম, এপিফেনি - বিভিন্ন ফলাফল তৈরি করে। কিছু কিছু খেলেন না, এবং কিছু ব্যতিক্রম ছুঁড়ে ফেলে।


Hah! আমি এইচটিএমএল 5 এ একটি পুরানো ম্যাকিনটোস গেমটিও পোর্ট করছি। আপনি কোনটি ক্লোন করছেন তা প্রকাশ করার জন্য যত্নশীল?
একটি দানবীন

1
এটি প্রকল্প আরশি, একটি টেম্পেস্ট ক্লোন।
স্টাফান কোচেন

"মিক্সিং" শব্দের অর্থ কী?
ম্যাডস স্কজার্ন

2
আপনি এটি শেষ করেছেন? আমরা কি এটি দেখতে পারি?
enyo

4
দুঃখের বিষয়, না। অতিরিক্ত সময় প্রকল্পগুলি শেষ না করার জন্য আমার একটি নকশ আছে। :( এটা জন্য একটি Git রেপো, কিন্তু আমি বছর এটা স্পর্শ করেছেন: github.com/stephank/arashi-js
স্টিফেন Kochen

উত্তর:


448

এইচটিএমএল 5 Audioঅবজেক্ট

আপনাকে <audio>উপাদানগুলির সাথে বিরক্ত করার দরকার নেই । এইচটিএমএল 5 আপনাকে সরাসরি Audioঅবজেক্টগুলিতে অ্যাক্সেস করতে দেয় :

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

অনুমানটির বর্তমান সংস্করণে মিশ্রণের জন্য কোনও সমর্থন নেই।

একাধিকবার একই শব্দ বাজানোর জন্য, Audioঅবজেক্টের একাধিক উদাহরণ তৈরি করুন । snd.currentTime=0এটি শেষ হয়ে যাওয়ার পরে আপনি এটিতে সেট করতেও পারেন।


যেহেতু জেএস কনস্ট্রাক্টর ফলব্যাক <source>উপাদানগুলিকে সমর্থন করে না , আপনার ব্যবহার করা উচিত

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

ব্রাউজার ওগ ভারবিসকে সমর্থন করে কিনা তা পরীক্ষা করতে।


আপনাকে একটি গেম বা গান অ্যাপ্লিকেশানটি (শুধুমাত্র একটি প্লেয়ারের চেয়ে বেশি) লেখার পারেন, আপনি ব্যবহার করতে চাইবেন আরো উন্নত ওয়েব অডিও API , যা এখন করা হয় অধিকাংশ ব্রাউজার দ্বারা সমর্থিত


18
Audioঅবজেক্টস অটোব্ফার্ড হয়। এগুলি Imageঅবজেক্টের সাথে সাদৃশ্য ডিজাইন করা হয়েছে , তাই পুরাতন স্কুল ইমেজ প্রিলোডিং কৌশলগুলি অডিওর সাথেও কাজ করে।
কর্নেল

5
এটি আইওএস-এও কাজ করে। নোট যদিও আপনি প্রয়োজন ব্যবহারকারী কর্ম কিছু ব্যবহার করতে (যেমন, একটি বোতামে ক্লিক) শব্দ শুরু করার। আপনি snd.play()উইন্ডোতে কিছু করতে পারবেন না load লোড ()।
হুস্কি

1
আমি এখনও <audio>ট্যাগটি ব্যবহার করছি কারণ এটি আরও নিয়ন্ত্রণযোগ্য। তবে যাইহোক তথ্যের জন্য ধন্যবাদ!
ডেরেক 朕 會 功夫

2
<audio> এইচটিএমএল 5 উপাদানগুলি একাধিক উত্সের জন্য মঞ্জুরি দেয় এমন তথ্য না থাকলে আমি এই পদ্ধতিটিকে প্রাধান্য দেব, সুতরাং যদি কোনও ব্রাউজার এমপি 3 সমর্থন করে না, আপনি ওজিজি / ওয়াভ এ ফ্যালব্যাক করতে পারেন। এটি সম্পাদন করতে জাভাস্ক্রিপ্টে কিছু কৌশল দরকার।
জোয়েলমদেব

2
আইওএস-এ 6 অটোপ্লে সমর্থিত: আপনি উইন্ডো.লোড () এ একটি সাধারণ snd.play () দিয়ে শব্দ শুরু করতে পারেন।
পিট্রো পলসিনেলি

36

W3C দ্বারা ওয়েব অডিও এপিআই

জুলাই ২০১২ পর্যন্ত, ওয়েব অডিও এপিআই এখন Chrome এ সমর্থিত, এবং কমপক্ষে আংশিকভাবে ফায়ারফক্সে সমর্থিত এবং সংস্করণ। হিসাবে আইওএস-এ যুক্ত হওয়ার কথা রয়েছে।

যদিও এটি বেসিক কাজগুলির জন্য প্রোগ্রামাগুলিভাবে ব্যবহার করা যথেষ্ট শক্তিশালী তবে অডিও উপাদানটি কখনই গেমস ইত্যাদির জন্য সম্পূর্ণ অডিও সমর্থন সরবরাহ করার জন্য বোঝানো হয় নি media ট্যাগ। গেমসের জন্য অডিও ট্যাগ ব্যবহার করার চেষ্টা করার সাথে অনেকগুলি সমস্যা রয়েছে:

  • অডিও উপাদানগুলির সাথে টাইমিং স্লিপগুলি সাধারণ
  • শব্দের প্রতিটি উদাহরণের জন্য আপনার একটি অডিও উপাদান প্রয়োজন
  • লোড ইভেন্টগুলি পুরোপুরি নির্ভরযোগ্য নয়
  • কোনও সাধারণ ভলিউম নিয়ন্ত্রণ নেই, কোনও বিবর্ণতা নেই, ফিল্টার / প্রভাব নেই

আমি ওয়েবঅডিও এপিআই দিয়ে শুরু করার জন্য এটি ওয়েবআডিও নিবন্ধটি দিয়ে শুরু করলাম । FieldRunners WebAudio কেস স্টাডি একটি ভাল পঠিত।


এটি গ্রহণযোগ্যটির চেয়ে উত্তম উত্তর, কারণ এটি সমস্যার সঠিক সমাধান (WebAudio এপিআই) উপর দৃষ্টি নিবদ্ধ করে এবং অডিও উপাদানগুলি অডিও উপাদানগুলির সাথে একসাথে একটি খারাপ সমাধান হ্যাক করার চেষ্টা করার পরিবর্তে অডিও উপাদানগুলি একটি ভাল সমাধান নয়
অ্যানোমালি

29

howler.js

গেম রচনার জন্য, সর্বোত্তম সমাধানগুলির মধ্যে একটি হ'ল লাইব্রেরি ব্যবহার করা যা ওয়েবের জন্য কোড লেখার সময় আমাদের যে সমস্ত সমস্যার মুখোমুখি হয়, যেমন হওলআরজেজেস সমাধান করে । howler.js দুর্দান্ত (তবে নিম্ন-স্তরের) ওয়েব অডিও এপিআই ব্যবহার করে সহজে ফ্রেমওয়ার্কের জন্য বিমূর্ত করে । ওয়েব অডিও এপিআই অনুপলব্ধ থাকলে এটি HTML5 অডিও এলিমেন্টে ফিরে যাওয়ার চেষ্টা করবে ।

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 , যা বিশেষত সিন্থ অডিও যেমন সঙ্গীত এবং প্রভাবগুলির জন্য তৈরি। উদাহরণ স্বরূপ:

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 এর অনুরূপ আর একটি লাইব্রেরি হ'ল গেমসের জন্য শব্দ ", এটি তুলনামূলকভাবে স্বতন্ত্র (এবং সম্ভবত আরও সংক্ষিপ্ত অনুভূতি) 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?]
  );
}

সারসংক্ষেপ

আপনার কোনও একক সাউন্ড ফাইলটি প্লে করা বা আপনার নিজস্ব এইচটিএমএল-ভিত্তিক সংগীত সম্পাদক, ইফেক্ট জেনারেটর বা ভিডিও গেম তৈরি করা দরকার কিনা এগুলির প্রতিটি লাইব্রেরির জন্য মূল্যবান।


গেম-ডেভেলপমেন্ট সম্পর্কে মন্তব্য করতে পারে না, তবে আমি এটি একটি ইন্টারফেসের কিছু ছোট অডিও প্রতিক্রিয়ার জন্য ব্যবহার করছি এবং এটির জন্য এটি চূড়ান্ত আচরণ করে। দ্রুত, সহজ এবং সহজ।
ইলকুলাস

সত্যিই দুর্দান্ত ফ্রেমওয়ার্ক, পাশাপাশি মোবাইলে দুর্দান্ত কাজ করে। আপনাকে এটি টাচ স্টার্ট দিয়ে ট্রিগার করতে হবে ... তবে এটি শেষ হয়ে গেলে এটি বাক্স থেকে বেরিয়ে যায় :)
ফিলিপ

9

আপনি কিছু ক্ষেত্রে এইচটিএমএল 5 অডিও সনাক্ত করতে এটি ব্যবহার করতেও পারেন:

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

এইচটিএমএল 5 জেএস সনাক্তকরণ ফাংশন

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

এটি লক্ষ করার জন্য ধন্যবাদ। আমি এই পদ্ধতিটি হ্যাজ.জেএস থেকে শিখেছি, তবে ফায়ারফক্সে এবং হ্যাশ.জেএস এর সোর্স কোড অনুসারে অপেরাতেও সম্ভবত এটির কিছু সমস্যা রয়েছে বলে আমি মনে করি। ( রেফার্স : github.com/phiggins42/has.js/issues/48 github.com/phiggins42/has.js/blob/master/detect/audio.js#L19 )
কোচেন

5

এমনকি একই শব্দ একই সাথে বাজানো সম্ভব করার জন্য এখানে একটি পদ্ধতি। প্রিলোডারের সাথে একত্রিত হন এবং আপনি প্রস্তুত। এটি ফায়ারফক্সে কমপক্ষে 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");

না। আমি মনে করি না যে প্রতিটি স্বতন্ত্র সাউন্ড প্লেব্যাকের জন্য একটি নতুন অবজেক্ট তৈরি করা মোটেই সমাধান। এটি একটি দ্রুত এবং নোংরা কাজ, তবে এটি আরও ভাল করা যায়।
পাওয়েল

@ পাওয়েল সত্য, এটি শব্দ বাজানোর মূল পদ্ধতি হিসাবে ব্যবহার করা উচিত নয়, তবে যতদূর আমি অবগত রয়েছি, উদাহরণের মূলনীতিটি একই সাথে একবারে একাধিকবার একই শব্দ বাজানোর একমাত্র উপায়, বা ওপি প্রকাশ করেছেন যে, "ওভারল্যাপিং প্লেব্যাকস"। (ব্রাউজার-প্লাগইনগুলির প্রয়োজন ছাড়াই)) আমার বর্তমান প্রকল্পে আমার প্রকৃত বাস্তবায়ন আমি পোস্ট করা উদাহরণ কোডের চেয়ে অনেক পরিশীলিত।
এফ -3000

4

আপনি যা চান তা একাধিক চ্যানেল শোনার মতো শোনাচ্ছে। ধরা যাক আপনার 4 টি চ্যানেল রয়েছে (সত্যই পুরানো 16-বিট গেমের মতো), এখনও HTML5 অডিও বৈশিষ্ট্যটি নিয়ে খেলতে পারিনি, তবে আপনাকে কেবল 4 <অডিও> উপাদান এবং চক্র ব্যবহার করতে হবে না পরের শব্দ প্রভাব খেলতে? আপনি কি চেষ্টা করেছেন? কি ঘটেছে? যদি এটি কাজ করে: একই সাথে আরও শব্দ বাজানোর জন্য, আরও বেশি <অডিও> উপাদান যুক্ত করুন।

আমি এটি HTML5 <audio> উপাদান ছাড়াই এর আগে http://flash-mp3-player.net/ থেকে একটি সামান্য ফ্ল্যাশ অবজেক্ট ব্যবহার করে করেছি - আমি একটি সংগীত কুইজ লিখেছি ( http://webdeavour.appspot.com/ ) এবং যখন ব্যবহারকারী প্রশ্নের জন্য বোতামটি ক্লিক করেন তখন এটি সংগীতের ক্লিপগুলি খেলতে ব্যবহার করে। প্রথমদিকে আমার কাছে প্রতি প্রশ্নে একজন খেলোয়াড় ছিল এবং এগুলি একে অপরের শীর্ষে খেলানো সম্ভব হয়েছিল, তাই আমি এটিকে পরিবর্তন করেছি যাতে কেবলমাত্র একজন খেলোয়াড় ছিল, যা আমি বিভিন্ন সংগীত ক্লিপগুলিতে লক্ষ্য করেছি।


এটি একটি আকর্ষণীয় চিন্তা, & lt; অডিও & জিটি ব্যবহার করার জন্য; চ্যানেল হিসাবে উপাদান। আমি যখন কোনো পৃষ্ঠাতে দুটি উপাদান দিই, তাহলে আমি করতে তাদের একযোগে খেলা এবং খেলার। দেখে মনে হচ্ছে যে ক্লোনিংটি আমি করছি তা আসলে যা প্রত্যাশা করে তা করে না, কারণ আমার আসল কোডে দুটি নমুনা খেলেও কাজ করে। ঠিক একই নমুনা দ্বিগুণ না। আমাকে আরও কিছু নিয়ে পরীক্ষা-নিরীক্ষা করতে হবে, এবং ফলাফলগুলিতে ফিরে আসব!
স্টাফান কোচেন

হ্যাঁ, সম্ভবত এটির কারণ হিসাবে এটি ক্লোন বলা হয়েছে এবং অনুলিপি করা হয়নি তার একটি সূক্ষ্ম কারণ রয়েছে। সম্ভবত ক্লোনটি এখনও মূলটির সাথে এমন কিছু ভাগ করছে যা তাদের উভয়কে একই সাথে খেলতে বাধা দেয়।
লি কোয়ালকোভস্কি

রেফারেন্সের জন্য, কমপক্ষে ফায়ারফক্সে একই <audio> উপাদানটি পুনরায় ব্যবহার করা কাজ করে না। আপনি 'src' বৈশিষ্ট্যটি সেট করতে পারেন তবে এটি কোনও ভিন্ন নমুনা লোড করবে না।
স্টাফান কোচেন

4

কটাক্ষপাত আছে জয় (-> আয়না ) (জাভাস্ক্রিপ্ট অডিও ইন্টারফেস) সাইট। তাদের উত্সটি দেখে, তারা play()বারবার কল করছে বলে মনে হয় এবং তারা উল্লেখ করে যে তাদের লাইব্রেরি এইচটিএমএল-ভিত্তিক গেমগুলির জন্য উপযুক্ত হতে পারে।

আপনি একসাথে একাধিক অডিও ইভেন্টগুলি ফায়ার করতে পারেন যা জাভাস্ক্রিপ্ট গেমস তৈরি করতে বা কিছু ব্যাকগ্রাউন্ড সংগীতের উপর ভয়েস বলার জন্য ব্যবহৃত হতে পারে


3

একই নমুনা একাধিকবার খেলতে, এমন কি কিছু করা সম্ভব হবে না:

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

( eঅডিও উপাদান)

সম্ভবত আমি আপনার সমস্যাটিকে পুরোপুরি ভুল বুঝেছি, আপনি কি একই সময়ে একাধিকবার সাউন্ড এফেক্ট খেলতে চান? তাহলে এটি সম্পূর্ণ ভুল।


এটি সঠিক, একই সময়ে আমার একই নমুনা একাধিক বার খেলতে হবে।
স্টাফান কোচেন 21

হ্যাঁ, এটি একই উদাহরণটি একাধিকবার অভিনয় করে তবে এই উত্তরটি দেখার জন্য লোকেরা কেবল নোট করে রাখুন যে ওপি শব্দের সাথে এটি "ওভারল্যাপিং প্লেব্যাকস" সৃষ্টি করে না।
প্যাট্রিক রবার্টস

3

এখানে একটি ধারণা। আপনার সমস্ত অডিও একটি নির্দিষ্ট শ্রেণির শব্দের জন্য একক স্বতন্ত্র অডিও উপাদান হিসাবে লোড করুন যেখানে এসআরসি ডেটা আপনার সমস্ত নমুনা একটি অবিচ্ছিন্ন অডিও ফাইলের মধ্যে রয়েছে (সম্ভবত কিছুটা নীরবতা চান যাতে আপনি কম সময়ের সাথে নমুনাগুলি ধরতে এবং কাটতে পারেন পরবর্তী নমুনায় রক্তপাতের ঝুঁকি)। তারপরে, নমুনার সন্ধান করুন এবং যখন প্রয়োজন হবে তখন এটি খেলুন।

খেলতে যদি এগুলির একটির বেশি প্রয়োজন হয় তবে আপনি একই এসসিআর দিয়ে একটি অতিরিক্ত অডিও উপাদান তৈরি করতে পারেন যাতে এটি ক্যাশে হয়। এখন, আপনার কাছে কার্যকরভাবে একাধিক "ট্র্যাক" রয়েছে। আপনি রাউন্ড রবিন ইত্যাদির মতো আপনার পছন্দসই সংস্থান বরাদ্দকরণ প্রকল্পের সাহায্যে ট্র্যাকের গ্রুপগুলি ব্যবহার করতে পারেন

আপনি যখন অন্যান্য উত্সটি খেলতে ট্র্যাকের জন্য সারিবদ্ধ শোনার মতো নির্দিষ্ট বিকল্পগুলিও নির্দিষ্ট করতে পারেন যখন সেই সংস্থানটি উপলভ্য হয় বা কোনও বর্তমান প্লেয়ার নমুনা কাটা হয়।


2

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

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

আমার জন্য ফায়ারফক্স এবং ক্রোমে ঠিক আছে।

আপনি যে শব্দটি শুরু করেছেন তা বন্ধ করতে, var সাউন্ড = ডকুমেন্ট.জেটলেমেন্টবিআইআইডি ("শট") করুন cl ক্লোননোড (সত্য); sound.play (); এবং পরে সাউন্ড.পজ ();


2

আমি সাউন্ডজেএস ব্যবহার করার পরামর্শ দেব , একটি লাইব্রেরি যা আমি বিকাশে সহায়তা করেছি। এটি আপনাকে সাউন্ডজেএস পিকিং ওয়েব অডিও, এইচটিএমএল অডিও বা যথাযথ ফ্ল্যাশ অডিও সহ সর্বত্র কাজ করে এমন একক কোড বেস লিখতে দেয়।

এটি আপনাকে যা চায় তার সবকটি করার অনুমতি দেয়:

  • একাধিক শব্দ প্লে এবং মিশ্রিত করুন,
  • একই নমুনাটি একাধিক বার খেলুন, সম্ভবত প্লেব্যাকগুলি ওভারল্যাপ করে
  • কোনও বিন্দুতে কোনও নমুনার প্লেব্যাক ব্যাহত করুন
  • থাকা ডাব্লুএইভি ফাইলগুলি খেলুন (ব্রাউজার সমর্থনের উপর নির্ভর করে)

আশা করি এইটি কাজ করবে.


লাইব্রেরিটি বরং দুর্দান্ত, আমি সত্যই এসএফএক্স জেনারেটরটি খনন করি।
আগ্রহীদের

1

একক <audio>উপাদান দিয়ে মাল্টি-শট প্লে করা সম্ভব নয় । এর জন্য আপনাকে একাধিক উপাদান ব্যবহার করতে হবে।


1

একটি মিউজিকবক্স কার্ড জেনারেটর প্রোগ্রাম করার সময় আমি এতে ছুটে এসেছি। বিভিন্ন লাইব্রেরি দিয়ে শুরু করা হয়েছে তবে প্রতিবারই কোনওরকম কোনও সমস্যা ছিল। সাধারণ অডিও বাস্তবায়নে ল্যাগটি খারাপ ছিল, একাধিক নাটক নেই ... অবশেষে লোলাগ লাইব্রেরি + সাউন্ড ম্যানেজার ব্যবহার করে শেষ হয়েছে:

http://lowlag.alienbill.com/ এবং http://www.schillmania.com/projects/soundmanager2/

আপনি এখানে বাস্তবায়ন চেক করতে পারেন: http://musicbox.grit.it/

আমি বহু ব্রাউজার নাটকের জন্য wav + og ফাইল তৈরি করেছি। এই মিউজিকবক্স প্লেয়ারটি আইপ্যাড, আইফোন, নেক্সাস, ম্যাক, পিসি ... আমার জন্য কাজ করে responsive


এটি একটি দুর্দান্ত মিউজিকবক্স অ্যাপ! আপনার কি গিটের সংগ্রহশালা আছে? আমি আমাদের বাচ্চাদের সাথে এটি ব্যবহার করতে পারি!
আইসারিটো

0

আমি জানি এটি একটি সম্পূর্ণ হ্যাক তবে ভেবেছিলাম কিছুক্ষণ আগে আমি এই নমুনা ওপেন সোর্স অডিও লাইব্রেরিটি যুক্ত করব I

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

নীচের লিঙ্কটি ক্লিক করার পরে, ব্লুজ রিফটি খেলতে হোম সারি কীগুলিতে টাইপ করুন (একই সাথে একাধিক কী টাইপ করুন ইত্যাদি)

জেথাম্প লাইব্রেরি ব্যবহার করে নমুনা >> http://davealger.com/apps/jthump/

এটি মূলত অদৃশ্য <iframe>উপাদান তৈরি করে কাজ করে যা একটি পৃষ্ঠা লোড করে যা একটি শব্দ শোনায় অন রেডি ()।

এটি অবশ্যই আদর্শ নয় তবে আপনি একা সৃজনশীলতার উপর ভিত্তি করে এই সমাধানটি +1 করতে পারেন (এবং এটি ওপেন সোর্স এবং যে কোনও ব্রাউজারে এটি চেষ্টা করেছি যা আমি চেষ্টা করেছি) আশা করি এটি অন্য কাউকে কিছু ধারণা সন্ধান করার সুযোগ দেয়।

:)


কেউ কেন এটিকে ভোট দিয়েছে? আমার কাছে একটি ব্যবহার্য বিকল্পের মতো মনে হচ্ছে।
jtrick

এটি একটি দুর্দান্ত হ্যাকি সমাধান তবে আমি এই লাইব্রেরিটি একটি নমুনা এইচটিএমএল 5 ক্যানভাস গেম তৈরি করতে ব্যবহার করেছি যাতে এটি কম কাজ করে না ... এই লাইব্রেরিটি ব্যবহার করে খেলাটি এখানে রয়েছে - বীপবক্স.নেট
ড্যাভএলগার ২A

0

নির্বাচিত উত্তর আইই ব্যতীত সমস্ত কিছুতে কাজ করবে। আমি কিভাবে করতে উপর একটি টিউটোরিয়াল লিখেছেন এটা ক্রস ব্রাউজার কাজ = 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();
 }
 };

আপনাকে এইচটিএমএল পৃষ্ঠায় নিম্নলিখিত ট্যাগটি যুক্ত করতে হবে:

<bgsound id="sound">

অবশেষে আপনি ফাংশনটি কল করতে পারেন এবং কেবল এখানে পথ দিয়ে যেতে পারেন:

playSomeSounds("sounds/welcome.wav");

0

আপনি সর্বদা চেষ্টা করতে পারেন AudioContextএটির সীমিত সমর্থন রয়েছে তবে এটি ওয়েব অডিও এপিআইয়ের একটি অংশ ওয়ার্কিং ড্রাফ্টের । আপনি যদি ভবিষ্যতে কিছু প্রকাশের পরিকল্পনা করে থাকেন তবে এটি মূল্যবান হতে পারে। এবং যদি আপনি কেবল ক্রোম এবং ফায়ারফক্সের জন্য প্রোগ্রাম করেন তবে আপনি সোনার।


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

ওয়েব অডিও এপিআই এই কাজের জন্য সঠিক সরঞ্জাম। সাউন্ড ফাইল লোড করা এবং এটি প্লে করার ক্ষেত্রে সামান্য কাজ জড়িত। ভাগ্যক্রমে এখানে প্রচুর লাইব্রেরি রয়েছে যা কাজটি সহজ করে দেয়। শব্দের প্রতি আগ্রহী হওয়ায় আমি মশারি নামে একটি গ্রন্থাগারও তৈরি করেছি আপনি পরীক্ষা করে দেখতে পারেন।

বর্তমানে এটি কেবল বিবর্ণ সাউন্ড এফেক্টকে সমর্থন করে এবং আমি 3D স্থানিককরণের মতো অন্যান্য জিনিসগুলিতেও কাজ করছি।

আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.