वेबसाइटों पर सूचना ध्वनि कैसे चलाएं?

108

जब कोई निश्चित घटना होती है, तो मैं चाहता हूं कि मेरी वेबसाइट उपयोगकर्ता के लिए एक छोटी सूचना ध्वनि चलाए।

वेबसाइट खुलते ही ध्वनि ऑटो-स्टार्ट (तुरन्त) नहीं होनी चाहिए । इसके बजाय, यह जावास्क्रिप्ट के माध्यम से मांग पर खेला जाना चाहिए (जब कि कुछ निश्चित घटना होती है)।

यह महत्वपूर्ण है कि यह पुराने ब्राउज़रों (IE6 और ऐसे) पर भी काम करता है।

तो, मूल रूप से दो प्रश्न हैं:

मुझे किस कोडेक का उपयोग करना चाहिए?
ऑडियो फ़ाइल को एम्बेड करने के लिए सबसे अच्छा अभ्यास क्या है? ( <embed>बनाम <object>बनाम फ्लैश बनाम <audio>)

— टीमो
स्रोत

आप github.com/VJAI/musquito

— VJAI

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> (फॉलबैक)

कोड का इस्तेमाल किया

क्रोम, सफारी और इंटरनेट एक्सप्लोरर के लिए एमपी 3।
फ़ायरफ़ॉक्स और ओपेरा के लिए OGG।

— टीमो
स्रोत

अच्छा उत्तर। इस मामले में हालांकि पेज खुलने पर ध्वनि तुरंत बजती है - लेकिन मैं आपको दिखाता हूं कि कैसे, प्रदर्शन प्रयोजनों के लिए।

— स्टीफन

@Stefan यह सही है लेकिन भ्रामक हो सकता है। मैं अपने उत्तर से इसे हटा दूंगा। संकेत के लिए धन्यवाद।

— तिमो

समाधान के लिए बहुत बहुत धन्यवाद @valmar

— जगदीप सिंह

@DavidLarsson क्योंकि कुछ ब्राउज़र हैं जो कुछ कोडेक्स नहीं पढ़ सकते हैं।

— तैमू

2

मैं अपने इंटरनेट एक्सप्लोरर संस्करण के साथ काम करने में विफल 8.

— । मोहम्मद अराफात अल महमूद

83

2016 तक, निम्नलिखित पर्याप्त होगा (आपको एम्बेड करने की आवश्यकता नहीं है):

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

बस इसे नवीनतम क्रोम (संस्करण 74.0.3729.169) पर आज़माया और यह मेरे लिए काम करता है।

— weltschmerz

यह क्रोम, एफएफ और ओपेरा पर सही ढंग से काम करता है और स्वीकृत उत्तर की तुलना में बेहतर दृष्टिकोण है क्योंकि यह उत्तर आपके शरीर टैग को ऑडियो टैग को जोड़ता रहता है क्योंकि सूचना स्क्रिप्ट को संभवतः अंतराल में कहा जाएगा

— मुहम्मद ओमर असलम

16

वेबसाइटों पर अधिसूचना ध्वनियों को चलाने के लिए एक और प्लगइन: Ion.Sound

लाभ:

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इसके लिए निर्धारित करते हैं, तो यह ध्वनि नहीं बजाएगा। इसके अलावा, याहू मीडिया लाइब्रेरी एक छोटा "प्ले" आइकन दिखाता है जो लिंक से बचा है ..

— टिमो

@valmar: visiblity: hidden;आपका जवाब है

— Starx

3

क्रॉस ब्राउज़र संगत सूचनाएं खेलें

जैसा कि इस पोस्ट से @Tim Tisdall ने सलाह दी है , Howler.js प्लगइन की जाँच करें ।

प्रदर्शन सुधार के 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()पहली बार चलने वाले कोड को कैसे करता है? कैसे रैपर अपने सभी setTimeouts को एक आवरण में रखता है?

— poshest

@poshest, मुझे नहीं पता कि यह कैसे खेलता है, स्रोत कोड की जाँच कर सकता है या प्लगइन के लेखक से संपर्क करने से आपको मदद मिल सकती है।

— शाइजुत

1

ठीक है धन्यवाद। यह सिर्फ इतना है कि आपने इस सुविधा का उल्लेख किया है और अन्य स्टैकओवरफ़्लो उत्तर से जुड़े हैं, लेकिन यह हॉवेल प्रलेखन में एक विशेषता के रूप में उल्लिखित नहीं है , इसलिए मैंने सोचा कि आप इसके बारे में कुछ विशेष जानते हैं।

— पॉशेस्ट

2

ऑडियो.जेएस का उपयोग करें जो कि फ्लैशबैक के<audio> साथ टैग के लिए पॉलीफ़िल है फ्लैश।

सामान्य तौर पर, https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills के लिए पॉलीफ़िल को HTML 5 एपीआई पर देखें .. ( इसमें अधिक <audio>पॉलीफ़िल शामिल हैं )

— गेब्रियल पेट्रीओली
स्रोत

2

यदि आप कोड पर ईवेंट कॉल करना चाहते हैं, तो सबसे अच्छा तरीका यह है कि ट्रिगर बनाना है क्योंकि ब्राउज़र जवाब नहीं देगा यदि उपयोगकर्ता पृष्ठ पर नहीं है

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

जब आप ध्वनि चलाना चाहते हैं तो आप अपने बटन को ट्रिगर कर सकते हैं

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

— Sfwan Essam
स्रोत

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/webtricks/play-sound-on-notification-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;
}

— जैक
स्रोत