ওয়েবসাইটগুলিতে কীভাবে কোনও বিজ্ঞপ্তির শব্দ বাজানো যায়?

108

যখন কোনও নির্দিষ্ট ইভেন্ট ঘটে তখন আমি চাই যে আমার ওয়েবসাইটটি ব্যবহারকারীর কাছে একটি স্বল্প বিজ্ঞপ্তি বাজানো হোক।

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

এটি গুরুত্বপূর্ণ যে এটি পুরানো ব্রাউজারগুলিতেও (আই 6 এবং অন্যান্য) কাজ করে।

সুতরাং, মূলত দুটি প্রশ্ন আছে:

আমার কোন কোডেক ব্যবহার করা উচিত?
অডিও ফাইল এম্বেড করার সেরা অনুশীলন কোনটি? ( <embed>বনাম <object>বনাম ফ্ল্যাশ বনাম <audio>)

— টিমো
সূত্র

আপনি github.com/VJAI/musquito

— ভিজেএআই

98

এই সমাধানটি বেশ কয়েকটি ব্রাউজারে (এমনকি ফ্ল্যাশ ইনস্টল না করে) কাজ করে:

<!doctype html>
<html>
  <head>
    <title>Audio test</title>
    <script>
      /**
        * Plays a sound using the HTML5 audio tag. Provide mp3 and ogg files for best browser support.
        * @param {string} filename The name of the file. Omit the ending!
        */
      function playSound(filename){
        var mp3Source = '<source src="' + filename + '.mp3" type="audio/mpeg">';
        var oggSource = '<source src="' + filename + '.ogg" type="audio/ogg">';
        var embedSource = '<embed hidden="true" autostart="true" loop="false" src="' + filename +'.mp3">';
        document.getElementById("sound").innerHTML='<audio autoplay="autoplay">' + mp3Source + oggSource + embedSource + '</audio>';
      }
    </script>
  </head>

  <body>
    <!-- Will try to play bing.mp3 or bing.ogg (depends on browser compatibility) -->
    <button onclick="playSound('bing');">Play</button>  
    <div id="sound"></div>
  </body>
</html>

ব্রাউজার সমর্থন

<audio> (আধুনিক ব্রাউজারগুলি)
<embed> (ফলব্যাক)

কোডগুলি ব্যবহার করা হয়েছে

Chrome, সাফারি এবং ইন্টারনেট এক্সপ্লোরারের জন্য এমপি 3।
ফায়ারফক্স এবং অপেরার জন্য ওজিজি।

— টিমো
সূত্র

চমৎকার উত্তর. এই ক্ষেত্রে যদিও পৃষ্ঠাটি খোলার সাথে সাথে শব্দটি তাত্ক্ষণিকভাবে বাজতে পারে - তবে আমি ধরে নিলাম আপনি কেবল প্রদর্শনীর উদ্দেশ্যে কীভাবে প্রদর্শন করবেন।

— স্টিফান

@ স্টেফান এটি সঠিক তবে বিভ্রান্তিকর হতে পারে। আমি আমার উত্তর থেকে এটি মুছে ফেলব। ইঙ্গিতটির জন্য ধন্যবাদ।

— টিমো

@ ওলমার

— জগদীপ সিং

@ ডেভিডলারসন কারণ কিছু ব্রাউজার রয়েছে যা নির্দিষ্ট কোডেকগুলি পড়তে পারে না।

— টিমো

2

আমি এটি আমার ইন্টারনেট এক্সপ্লোরার সংস্করণ 8 দিয়ে কাজ করতে ব্যর্থ হয়েছি

— মোঃ আরাফাত আল মাহমুদ

83

২০১ of সালের হিসাবে, নিম্নলিখিতগুলি যথেষ্ট হবে (আপনার এম্বেড করার দরকার নেই):

let src = 'https://file-examples.com/wp-content/uploads/2017/11/file_example_MP3_700KB.mp3';
let audio = new Audio(src);
audio.play();

আরও এখানে দেখুন ।

— weltschmerz
সূত্র

এবং অডিও এটি করার আগে সংজ্ঞায়িত করা হয়েছে কিনা তাও পরীক্ষা করে দেখুন।

— ক্রিস্টোফ রাউসি

1

এটি একটি দুর্দান্ত উত্তর, তাই সহজ এবং পুরোপুরি কাজ করে।

— পোলারিস

3

আমার আর কাজ হয় নাUncaught (in promise) DOMException

— জ্যাক ফাঁকা

2

এটি সর্বশেষতম ক্রোমে (সংস্করণ .0৪.০.77৯.১৯।) চেষ্টা করে দেখেছি এবং এটি আমার পক্ষে কাজ করে।

— ওয়েলটশ্মারজ

এটি ক্রোম, এফএফ এবং অপেরাতে সঠিকভাবে কাজ করে এবং স্বীকৃত উত্তরের চেয়ে অনেক ভাল পন্থা কারণ উত্তরটি আপনার বডি ট্যাগের সাথে অডিও ট্যাগ যুক্ত করে রাখে কারণ নোটিফিকেশন স্ক্রিপ্টটি সম্ভবত অন্তরগুলিতে ডাকা হবে

— মুহাম্মদ ওমর আসলাম

16

ওয়েবসাইটগুলিতে বিজ্ঞপ্তি শোনার জন্য আরও একটি প্লাগইন: আয়ন S সাউন্ড

সুবিধাদি:

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

প্লাগইন সেট আপ করুন:

// set up config
ion.sound({
    sounds: [
        {
            name: "my_cool_sound"
        },
        {
            name: "notify_sound",
            volume: 0.2
        },
        {
            name: "alert_sound",
            volume: 0.3,
            preload: false
        }
    ],
    volume: 0.5,
    path: "sounds/",
    preload: true
});

// And play sound!
ion.sound.play("my_cool_sound");

— ক্যাসিও ল্যান্ডিম
সূত্র

4

ইয়াহুর মিডিয়া প্লেয়ার সম্পর্কে কীভাবে কেবল ইয়াহুর লাইব্রেরি এম্বেড করুন

<script type="text/javascript" src="http://mediaplayer.yahoo.com/js"></script>

এবং এটি ব্যবহার করুন

<a id="beep" href="song.mp3">Play Song</a>

অটোস্টার্ট করতে

$(function() { $("#beep").click(); });

— Starx
সূত্র

এছাড়াও একটি দুর্দান্ত সমাধান তবে কি এই লিঙ্কটি লুকানো সম্ভব? আমি মনে করি আপনি যদি display: noneএটির জন্য সেট করেন তবে এটি আর শব্দ বাজবে না। এছাড়াও, ইয়াহু মিডিয়া লাইব্রেরি লিঙ্কটির একটি ছোট "প্লে" আইকন দেখায় ..

— টিমো

@ ওলমার: visiblity: hidden;আপনার উত্তর

— স্টারেক্স

3

ক্রস ব্রাউজারের সামঞ্জস্যপূর্ণ বিজ্ঞপ্তিগুলি খেলুন

এই পোস্টটি থেকে @ টিম টিসডাল দ্বারা পরামর্শ হিসাবে , হাওলির.জেএস প্লাগইন পরীক্ষা করুন।

ক্রোমের মতো ব্রাউজারগুলি কর্মক্ষমতা উন্নতির javascriptজন্য যখন ছোট বা নিষ্ক্রিয় থাকে তখন সম্পাদন অক্ষম করে । তবে এটি ব্রাউজারটি নিষ্ক্রিয় বা ব্যবহারকারীর দ্বারা ক্ষুদ্রতর হলেও এমনকি এটি বিজ্ঞপ্তি শোনায়।

  var sound =new Howl({
                     src: ['../sounds/rings.mp3','../sounds/rings.wav','../sounds/rings.ogg',
                           '../sounds/rings.aiff'],
                     autoplay: true,
                     loop: true
                    });

               sound.play();

আশা কাউকে সাহায্য করে।

— shaijut
সূত্র

"এটি ব্রাউজার নিষ্ক্রিয় বা হ্রাস করা হলেও বিজ্ঞপ্তিগুলি কীভাবে শোনাচ্ছে"? পৃষ্ঠাটি ঘুমন্ত অবস্থায় ডাকলে শব্দটি বাজতে পারে, কিন্তু যে কোডটি কল sound.play()করে তা প্রথম স্থানে কীভাবে চলে? কীভাবে হোলার আপনার সমস্ত সেটটাইমআউটগুলিকে একটি মোড়কে রাখে?

— poshest

@ পোস্টস্ট, আমি জানি না এটি কীভাবে চালায়, সোর্স কোডটি চেক করা হতে পারে বা প্লাগইন লেখকের সাথে যোগাযোগ করা আপনাকে সহায়তা করতে পারে।

— শাইজুট

1

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

— poshest

2

অডিও.জেএস ব্যবহার করুন যা <audio>ফ্ল্যাশ করতে ফ্যালব্যাক সহ ট্যাগটির জন্য একটি পলিফিল ।

সাধারণভাবে, এইচটিএমএল 5 এপিআই-তে পলফিলের জন্য https://github.com/Modernizr/Modernizr/wiki/HTML5- ক্রস- ব্রাউজার- পলিফিলগুলি দেখুন<audio> .. ( এতে আরও পলিফিল রয়েছে )

— গ্যাব্রিয়েল পেট্রিওলি
সূত্র

2

আপনি যদি কোডটিতে ইভেন্টটি কল করতে চান তবে তা করার সর্বোত্তম উপায় হ'ল ট্রিগার তৈরি করা কারণ ব্যবহারকারী পৃষ্ঠাটিতে না থাকলে ব্রাউজারটি প্রতিক্রিয়া জানায় না the

<button type="button" style="display:none" id="playSoundBtn" onclick="playSound();"></button>

আপনি যখন শব্দটি খেলতে চান তখন আপনি নিজের বোতামটি ট্রিগার করতে পারেন

$('#playSoundBtn').trigger('click');

— এসফওয়ান এসম
সূত্র

0

var audio = new Audio('audio_file.mp3');

function post()
{
  var tval=document.getElementById("mess").value;   
  var inhtml=document.getElementById("chat_div");
  inhtml.innerHTML=inhtml.innerHTML+"<p class='me'>Me:-"+tval+"</p>";
  inhtml.innerHTML=inhtml.innerHTML+"<p class='demo'>Demo:-Hi! how are you</p>";
  audio.play();
}

এই কোডটি টালকস্কোড থেকে সম্পূর্ণ টিউটোরিয়ালের জন্য http://talkerscode.com/webtrick/play-sound-on-notifications- using-javascript-and-php.php দেখুন

— ramancha
সূত্র

0

আমরা কেবল অডিও এবং একটি অবজেক্ট একসাথে ব্যবহার করতে পারি:

var audio = {};
audio['ubuntu'] = new Audio();
audio['ubuntu'].src="start.ogg";
audio['ubuntu'].play();

এবং এমনকি যোগ addEventListenerজন্য playএবংended

— মোস্তফা
সূত্র

0

আমি শব্দ বাজানোর একটি পরিষ্কার কার্যকরী পদ্ধতি লিখেছি:

sounds = {
    test : new Audio('/assets/sounds/test.mp3')
};

sound_volume = 0.1;

function playSound(sound) {
    sounds[sound].volume = sound_volume;
    sounds[sound].play();
}
function stopSound(sound) {
    sounds[sound].pause();
}
function setVolume(sound, volume) {
    sounds[sound].volume = volume;
    sound_volume = volume;
}

— নাবিক
সূত্র