जावास्क्रिप्ट का उपयोग करके ध्वनि सूचनाएं बजाना?


86

मैं ऐसा कैसे कर सकता हूं, इसलिए जब भी कोई उपयोगकर्ता किसी लिंक पर क्लिक करता है तो हम एक ध्वनि खेलते हैं? यहाँ जावास्क्रिप्ट और jquery का उपयोग करना।


2
मैंने ऑडियो कंट्रोल साउंडप्ले.निकोलवुकोविक.net63.net के लिए एक jQ प्लगइन लिखा है , यह आपके द्वारा पूछे जाने वाले और अधिक का समर्थन करता है, डॉक्स को जावास्क्रिप्ट कोड के साथ बंडल किया गया है, इसे देखें।
सार्वजनिक

आप (उदाहरण के लिए) पेज साउंड इफेक्ट्स के एक समूह के साथ प्लेलिस्ट (ओं) को पॉप्युलेट कर सकते हैं और .load(), .play()वे एपी का उपयोग करके महत्वपूर्ण क्षणों में कर सकते हैं।
सार्वजनिक

1
पवित्र सभी चीजों के प्यार के लिए, एक मूक विकल्प शामिल करें। ध्वनियों के साथ लिंक यह सुनिश्चित करने के लिए सबसे तेज़ तरीकों में से एक है कि उपयोगकर्ता आपकी साइट पर कभी वापस नहीं आता है।
वोबल्स

जवाबों:


46

इस प्लगइन का उपयोग करें: https://github.com/admsev/jquery-play-sound

$.playSound('http://example.org/sound.mp3');

क्या इसे बनाने का कोई तरीका है ताकि यह वास्तविक लिंक के url को खींच सके?
hakarune

@hakarune: हाँ, स्रोत से समाप्त होने वाले ".mp3" को हटा दें ।
काई नैक

यह लगता है कि यदि ब्राउज़र निष्क्रिय है या उपयोगकर्ता द्वारा कम से कम खेला जाता है । आशा किसी की मदद करती है।
षिजुत

25

<audio>अपने पृष्ठ पर एक तत्व रखें ।
अपना ऑडियो तत्व प्राप्त करें और play()विधि को कॉल करें :

document.getElementById('yourAudioTag').play();

इस उदाहरण को देखें: http://www.storiesinflight.com/html5/audio.html

यह साइट आपके द्वारा की जाने वाली कुछ अन्य ठंडी चीजों को हटा देती है load(),pause() , और ऑडियो तत्व के कुछ अन्य संपत्तियों।

जब आप वास्तव में खेलना चाहते हैं तो यह ऑडियो तत्व आपके ऊपर है। बटन का पाठ पढ़ें और यदि आप चाहें तो इसकी तुलना "नहीं" से करें।

वैकल्पिक रूप से

http://www.schillmania.com/projects/soundmanager2/

SoundManager 2 एपीआई का उपयोग करने के लिए एक आसान प्रदान करता है जो ध्वनि को किसी भी आधुनिक ब्राउज़र में चलाने की अनुमति देता है, जिसमें IE 6+ भी शामिल है। यदि ब्राउज़र HTML5 का समर्थन नहीं करता है, तो उसे फ्लैश की मदद मिलती है। यदि आप कड़ाई से HTML5 चाहते हैं और कोई फ्लैश नहीं है, तो इसके लिए एक सेटिंग है, तरजीह = झूठी

यह iPad, iPhone (iOS4) और अन्य HTML5- सक्षम उपकरणों + ब्राउज़रों पर 100% फ्लैश-फ्री ऑडियो का समर्थन करता है

उपयोग के रूप में सरल है:

<script src="soundmanager2.js"></script>
<script>
// where to find flash SWFs, if needed...
soundManager.url = '/path/to/swf-files/';

soundManager.onready(function() {
    soundManager.createSound({
        id: 'mySound',
        url: '/path/to/an.mp3'
    });

    // ...and play it
    soundManager.play('mySound');
});

यहां एक्शन में इसका डेमो दिया गया है: http://www.schillmania.com/projects/soundmanager2/demo/christmas-lights/


21

कुछ ऐसा मिला:

//javascript:
function playSound( url ){   
  document.getElementById("sound").innerHTML="<embed src='"+url+"' hidden=true autostart=true loop=false>";
} 

5
यह धीमा करना है। विंडोज़ ब्राउजर्स के साथ खेलने में लगभग एक सेकंड का समय लगता है
तत्कालीन

@ कोडलोड कि आवेदन पर निर्भर करता है। 1 दूसरा मेरी आवश्यकताओं को पूरा करेगा।
मुहद्

1
इसके अलावा, आप देरी से छुटकारा पाने के लिए इसे किसी तरह से प्रीलोड कर सकते हैं।
मुहद्

9
देरी डोम पार्सिंग से आती है, फिर फ़ाइल लोड करना, और इसे शुरू करना। यदि आप इसे प्रीलोड करते हैं, तो आप जरूरत पड़ने पर इसे शुरू कर सकते हैं ।
Xeoncross

मूसडाउन इवेंट के बाद 1 सेकंड एक लंबा समय है। बहुत लंबा।
तारकुस

12

HTML5 ऑडियो टैग और jquery का उपयोग करना:

// appending HTML5 Audio Tag in HTML Body
$('<audio id="chatAudio">
    <source src="notify.ogg" type="audio/ogg">
    <source src="notify.mp3" type="audio/mpeg">
</audio>').appendTo('body');

// play sound
$('#chatAudio')[0].play();

यहां से कोड ।

मेरे कार्यान्वयन में मैंने सीधे jquery परिशिष्ट के बिना HTML में ऑडियो एम्बेड जोड़ा।


2
केवल संदर्भ के लिए, मैं ajax फ़ंक्शन (जो पेज लोड पर चलता है) से सफलता हैंडलर पर ध्वनि बजा रहा हूं, और यह त्रुटि प्राप्त करें: Uncaught (in promise) DOMException: play() failed because the user didn't interact with the document firstChrome Version 70.0.3538.102 (Official Build) (64-bit)... यहां समाधान प्रतीत होता है: stackoverflow.com/a/52821721
user1063287


7
$('a').click(function(){
    $('embed').remove();
    $('body').append('<embed src="/path/to/your/sound.wav" autostart="true" hidden="true" loop="false">');
});

इस विधि को करने से क्रोम में स्क्रॉल बार नीले क्यों हो जाते हैं?
ब्रायन लीशमैन

इस लिंक को खोलने यह दोनों समस्या scrol बार का समाधान होगा और यह भी खेलने ध्वनि stackoverflow.com/questions/15483455/...
आजम अल्वी

3

मैंने एक छोटा सा फंक्शन लिखा जो वेब ऑडियो एपीआई के साथ कर सकता है ...

var beep = function(duration, type, finishedCallback) {

    if (!(window.audioContext || window.webkitAudioContext)) {
        throw Error("Your browser does not support Audio Context.");
    }

    duration = +duration;

    // Only 0-4 are valid types.
    type = (type % 5) || 0;

    if (typeof finishedCallback != "function") {
        finishedCallback = function() {};   
    }

    var ctx = new (window.audioContext || window.webkitAudioContext);
    var osc = ctx.createOscillator();

    osc.type = type;

    osc.connect(ctx.destination);
    osc.noteOn(0);

    setTimeout(function() {
        osc.noteOff(0);
        finishedCallback();
    }, duration);

};


1

निम्नलिखित कोड आपको केवल जावास्क्रिप्ट का उपयोग करके वेब पेज में ध्वनि चलाने में मदद कर सकते हैं। आप http://sourcecodemania.com/playing-sound-javascript-flash-player/ पर अधिक विवरण देख सकते हैं

<script>
function getPlayer(pid) {
    var obj = document.getElementById(pid);
    if (obj.doPlay) return obj;
    for(i=0; i<obj.childNodes.length; i++) {
        var child = obj.childNodes[i];
        if (child.tagName == "EMBED") return child;
    }
}
function doPlay(fname) {
    var player=getPlayer("audio1");
    player.play(fname);
}
function doStop() {
    var player=getPlayer("audio1");
    player.doStop();
}
</script>

<form>
<input type="button" value="Play Sound" onClick="doPlay('texi.wav')">
<a href="#" onClick="doPlay('texi.wav')">[Play]</a>
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"
    width="40"
    height="40"
    id="audio1"
    align="middle">
    <embed src="wavplayer.swf?h=20&w=20"
        bgcolor="#ffffff"
        width="40"
        height="40"
        allowScriptAccess="always"
        type="application/x-shockwave-flash"
        pluginspage="http://www.macromedia.com/go/getflashplayer"
    />
</object>

<input type="button" value="Stop Sound" onClick="doStop()">
</form>

0

पहली चीजें पहले, मैं एक उपयोगकर्ता के रूप में ऐसा नहीं चाहूंगा।

सबसे अच्छा तरीका शायद एक छोटे फ्लैश एप्लेट का उपयोग करना है जो पृष्ठभूमि में आपकी ध्वनि बजाता है।

यहाँ भी उत्तर दिया गया: क्रॉस-प्लेटफॉर्म, जावास्क्रिप्ट से ध्वनि खेलने के लिए क्रॉस-ब्राउज़र तरीका?


3
इसके बारे में इतना बुरा क्या है अगर उपयोगकर्ता जानता है कि एक ध्वनि बजाई जाएगी?
एलसी।

3
यह उपयोगी है, जब नए आदेश आते हैं, तो उपयोगकर्ता को बीप अलर्ट की क्या आवश्यकता है? शायद उपयोगकर्ता पूरे समय स्क्रीन पर आंखों के साथ नहीं हैं, शायद मुझे एक पेशाब की जरूरत है और
बीईईपी
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.