html5 एचटीएमएल 5 ऑडियो स्टॉप समारोह




html5-audio (11)

मैं अपने नेविगेशन में प्रत्येक लिंक के क्लिक पर एक छोटी ऑडियो क्लिप खेल रहा हूं

HTML कोड:

<audio tabindex="0" id="beep-one" controls preload="auto" >
    <source src="audio/Output 1-2.mp3">
    <source src="audio/Output 1-2.ogg">
</audio>

जेएस कोड:

$('#links a').click(function(e) {
    e.preventDefault();
    var beepOne = $("#beep-one")[0];
    beepOne.play();
});

यह अभी तक ठीक काम कर रहा है।

समस्या तब होती है जब एक ध्वनि क्लिप पहले से चल रहा है और मैं किसी भी लिंक पर क्लिक करता हूं कुछ भी नहीं होता है।

मैंने लिंक के क्लिक पर पहले से ही चलने वाली ध्वनि को रोकने की कोशिश की, लेकिन इसके लिए एचटीएमएल 5 के ऑडियो एपीआई में कोई सीधी घटना नहीं है

मैंने कोड का पालन करने की कोशिश की लेकिन यह काम नहीं कर रहा है

$.each($('audio'), function () {
    $(this).stop();
});

कोई सुझाव कृपया?


मुझे एक ही समस्या थी। एक स्टॉप को स्ट्रीम को रोकना चाहिए और यदि यह रेडियो है तो ऑनप्ले लाइव रहें । मैंने देखा सभी समाधानों का नुकसान था :

  • player.currentTime = 0 स्ट्रीम डाउनलोड करता रहता है।
  • player.src = '' error इवेंट बढ़ाएं

मेरा समाधान:

var player = document.getElementById('radio');
player.pause();
player.src = player.src;

और एचटीएमएल

<audio src="http://radio-stream" id="radio" class="hidden" preload="none"></audio>

यह दृष्टिकोण "ब्रूट फोर्स" है, लेकिन यह काम करता है कि jQuery का उपयोग करके "अनुमति" है। अपने "प्लेयर" <audio></audio> टैग को एक div के साथ आस पास करें (यहां "plHolder" की आईडी के साथ)।

<div id="plHolder">
     <audio controls id="player">
     ...
     </audio>
<div>

फिर यह जावास्क्रिप्ट काम करना चाहिए:

function stopAudio() {
    var savePlayer = $('#plHolder').html(); // Save player code
    $('#player').remove(); // Remove player from DOM
    $('#FlHolder').html(savePlayer); // Restore it
}

इस त्रुटि को हल करने का सरल तरीका त्रुटि को पकड़ना है।

audioElement.play () एक वादा देता है, इसलिए .catch () के साथ निम्न कोड पर्याप्त इस समस्या का प्रबंधन करना चाहिए:

function playSound(sound) {
  sfx.pause();
  sfx.currentTime = 0;
  sfx.src = sound;
  sfx.play().catch(e => e);
}

नोट: पिछड़े संगतता के लिए आप तीर फ़ंक्शन को अज्ञात फ़ंक्शन के साथ प्रतिस्थापित करना चाह सकते हैं।


मुझे क्या करना है एंगुलर 2 का उपयोग करके नियंत्रण को पूरी तरह से हटा देना है, फिर इसे फिर से लोड किया जाता है जब अगले गीत में ऑडियो पथ होता है:

<audio id="audioplayer" *ngIf="song?.audio_path">

फिर जब मैं इसे कोड में अनलोड करना चाहता हूं तो मैं यह करता हूं:

this.song = Object.assign({},this.song,{audio_path: null});

जब अगला गीत असाइन किया जाता है, तो नियंत्रण पूरी तरह से स्क्रैच से पुनर्निर्मित हो जाता है:

this.song = this.songOnDeck;

मेरा मानना ​​है कि यह जांचना अच्छा होगा कि ऑडियो राज्य खेल रहा है या वर्तमान समय संपत्ति को रीसेट कर रहा है या नहीं।

if (sound.currentTime !== 0 && (sound.currentTime > 0 && sound.currentTime < sound.duration) {
    sound.currentTime = 0;
}
sound.play();

एक साइड नोट के रूप में और क्योंकि मैं हाल ही में स्वीकार किए गए उत्तर में प्रदान की गई स्टॉप विधि का उपयोग कर रहा था, इस लिंक के अनुसार:

https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Media_events

वर्तमान समय को मैन्युअल रूप से सेट करके ऑडियो तत्व पर 'कैनप्लेथ्रू' ईवेंट को आग लग सकती है। लिंक में यह फ़ायरफ़ॉक्स का उल्लेख करता है, लेकिन क्रोम पर मैन्युअल रूप से वर्तमान समय सेट करने के बाद मुझे इस घटना को फायरिंग का सामना करना पड़ा। तो यदि आपके पास इस घटना से जुड़ा व्यवहार है तो आप ऑडियो लूप में समाप्त हो सकते हैं।


stop() बजाय stop() आप इसके साथ प्रयास कर सकते हैं:

sound.pause();
sound.currentTime = 0;

यह वांछित प्रभाव होना चाहिए


यह विधि काम करती है:

audio.pause();
audio.currentTime = 0;

लेकिन अगर आप ऑडियो को रोकते समय इन दो पंक्तियों को कोड लिखना नहीं चाहते हैं तो आप दो चीजों में से एक कर सकते हैं। दूसरा मुझे लगता है कि यह अधिक उपयुक्त है और मुझे यकीन नहीं है कि "जावास्क्रिप्ट मानकों के देवताओं" ने इस मानक को क्यों नहीं बनाया है।

पहली विधि: एक फ़ंक्शन बनाएं और ऑडियो पास करें

function stopAudio(audio) {
    audio.pause();
    audio.currentTime = 0;
}

//then using it:
stopAudio(audio);

दूसरी विधि (पसंदीदा): ऑडियो वर्ग का विस्तार करें:

Audio.prototype.stop = function() {
    this.pause();
    this.currentTime = 0;
};

मेरे पास यह एक जावास्क्रिप्ट फ़ाइल में है जिसे मैंने "AudioPlus.js" कहा है जिसे मैं अपने एचटीएमएल में किसी भी स्क्रिप्ट से पहले शामिल करता हूं जो ऑडियो से निपटता है।

फिर आप ऑडियो ऑब्जेक्ट्स पर स्टॉप फ़ंक्शन को कॉल कर सकते हैं:

audio.stop();

"कैप्चरथ्रू" के साथ अंतिम रूप से क्रोम मुद्दा:

मैंने सभी ब्राउज़रों में इसका परीक्षण नहीं किया है, लेकिन यह एक समस्या है जो मैं क्रोम में आया था। यदि आप उस ऑडियो पर वर्तमान समय सेट करने का प्रयास करते हैं जिसमें "कैप्लेथथ्रू" ईवेंट श्रोता से जुड़ा हुआ है तो आप उस घटना को फिर से ट्रिगर करेंगे जो अवांछित परिणाम का कारण बन सकता है।

तो समाधान, सभी मामलों के समान जब आपने एक ईवेंट श्रोता संलग्न किया है जिसे आप वास्तव में सुनिश्चित करना चाहते हैं कि यह फिर से ट्रिगर नहीं किया गया है, तो पहले कॉल के बाद ईवेंट श्रोता को निकालना है। कुछ इस तरह:

//note using jquery to attach the event. You can use plain javascript as well of course.
$(audio).on("canplaythrough", function() {
    $(this).off("canplaythrough");

    // rest of the code ...
});

बोनस:

ध्यान दें कि आप ऑडियो वर्ग (या उस मामले के लिए किसी मूल जावास्क्रिप्ट क्लास) में और भी कस्टम तरीकों को जोड़ सकते हैं।

उदाहरण के लिए यदि आप एक "पुनरारंभ" विधि चाहते थे जो ऑडियो को पुनरारंभ करता है तो यह कुछ ऐसा दिखाई दे सकता है:

Audio.prototype.restart= function() {
    this.pause();
    this.currentTime = 0;
    this.play();
};

स्टॉप () विधि करने का मेरा तरीका यहां है:

कहीं कोड में:

audioCh1: document.createElement("audio");

और फिर स्टॉप () में:

this.audioCh1.pause()
this.audioCh1.src = 'data:audio/wav;base64,UklGRiQAAABXQVZFZm10IBAAAAABAAEAVFYAAFRWAAABAAgAZGF0YQAAAAA=';

इस तरह हम अतिरिक्त अनुरोध नहीं करते हैं, पुराना एक रद्द कर दिया जाता है और हमारा ऑडियो तत्व स्वच्छ स्थिति में होता है (क्रोम और एफएफ में परीक्षण किया जाता है):>


सबसे पहले आपको अपने ऑडियो तत्व के लिए एक आईडी सेट करना होगा

आपके जेएस में:

var ply = document.getElementById('player');

var oldSrc = ply.src; // बस पुराने स्रोत को याद रखने के लिए

ply.src = ""; // उस खिलाड़ी को रोकने के लिए जिसे आपको स्रोत को प्रतिस्थापित करने के लिए कुछ भी नहीं है


मेरे लिए कोड ठीक काम कर रहा है। (IE10 +)

var Wmp = document.getElementById("MediaPlayer");                
    Wmp.controls.stop();

<object classid="clsid:6BF52A52-394A-11D3-B153-00C04F79FAA6"
    standby="Loading áudio..." style="width: 100%; height: 170px" id="MediaPlayer">...

उममीद है कि इससे मदद मिलेगी।





html5-audio