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




html audio (6)

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

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

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

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

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

मुझे एक बहुत ही सुरुचिपूर्ण समाधान मिला जो बहुत सारे ब्राउज़रों पर काम करता है (फ्लैश के बिना भी)।

मैंने क्रोम, सफारी, फ़ायरफ़ॉक्स, ओपेरा और आईई 6 पर परीक्षण किया।

यह नए ब्राउज़र के लिए एचटीएमएल 5 <audio> टैग का मिश्रण है और <embed> टैग पुराने ब्राउज़र के लिए फ़ॉलबैक है:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>

    <head>
        <title>Audio test</title>

        <script type="text/javascript">
            /**
             * @param {string} filename The name of the file WITHOUT ending
             */
            function playSound(filename){   
                document.getElementById("sound").innerHTML='<audio autoplay="autoplay"><source src="' + filename + '.mp3" type="audio/mpeg" /><source src="' + filename + '.ogg" type="audio/ogg" /><embed hidden="true" autostart="true" loop="false" src="' + filename +'.mp3" /></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>

कोडेक्स के रूप में मैं क्रोम, सफारी और आईई के लिए एमपी 3 का उपयोग करता हूं। फ़ायरफ़ॉक्स और ओपेरा के लिए मैंने ओजीजी का इस्तेमाल किया।


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 जाएं


याहू के मीडिया प्लेयर के बारे में कैसे याहू की लाइब्रेरी को एम्बेड करें

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

और इसका इस्तेमाल करें

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

ऑटोस्टार्ट करने के लिए

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

audio.js उपयोग करें जो audio.js साथ <audio> टैग के लिए पॉलीफिल है।

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


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

var audio = new Audio('/path/to/audio/file.mp3');
audio.play();

here और देखें।


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

लाभ:

  • एचटीएमएल 5 ऑडियो पर फॉलबैक के साथ वेब ऑडियो एपीआई के आधार पर ध्वनि बजाने के लिए जावास्क्रिप्ट प्लगइन।
  • प्लगइन सबसे लोकप्रिय डेस्कटॉप और मोबाइल ब्राउज़र पर काम कर रहा है और सामान्य वेब साइटों से ब्राउजर गेम तक हर जगह इस्तेमाल किया जा सकता है।
  • ऑडियो-स्प्राइट्स समर्थन शामिल थे।
  • कोई निर्भरता नहीं (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");






html5-audio