एक बटन क्लिक करने पर jQuery का उपयोग करके एक ऑडियो फ़ाइल चलाएं

91

बटन क्लिक करने पर मैं एक ऑडियो फ़ाइल चलाने की कोशिश कर रहा हूं, लेकिन यह काम नहीं कर रहा है, मेरा HTML कोड है:

<html>    
    <body>
        <div id="container">
            <button id="play">
                Play Music
            </button>
        </div>
    </body>
</html>

मेरा जावास्क्रिप्ट है:

$('document').ready(function () {
    $('#play').click(function () {
        var audio = {};
        audio["walk"] = new Audio();
        audio["walk"].src = "http://www.rangde.org/static/bell-ring-01.mp3"
        audio["walk"].addEventListener('load', function () {
            audio["walk"].play();
        });
    });
});

मैंने उसके लिए एक फिडेल भी बनाया है।

javascript jquery html

— सुरेश पट्टू
स्रोत

क्या आप HTML5 के ऑडियो का उपयोग कर रहे थे

— OnesimusUnbound

143

कौन सा दृष्टिकोण?

आप <audio>टैग या <object>या के साथ ऑडियो चला सकते हैं <embed>। आलसी लोडिंग (लोड जब आपको इसकी आवश्यकता होती है) ध्वनि सबसे अच्छा दृष्टिकोण है यदि इसका आकार छोटा है। आप ऑडियो तत्व को गतिशील रूप से बना सकते हैं, जब इसका लोड हो जाता है तो आप इसे शुरू कर सकते हैं .play()और इसके साथ रोक सकते हैं .pause()।

जिन चीजों का हमने इस्तेमाल किया

हम इस canplayघटना का उपयोग करने के लिए हमारी फ़ाइल को चलाने के लिए तैयार है।

.stop()ऑडियो तत्वों के लिए कोई फ़ंक्शन नहीं है । हम केवल उन्हें रोक सकते हैं। और जब हम ऑडियो फाइल की शुरुआत से शुरुआत करना चाहते हैं तो हम इसे बदल देते हैं .currentTime। हम अपने उदाहरण में इस लाइन का उपयोग करेंगे audioElement.currentTime = 0;। .stop()फ़ंक्शन को प्राप्त करने के लिए हम पहले फ़ाइल को रोकते हैं फिर उसका समय रीसेट करते हैं।

हम ऑडियो फ़ाइल की लंबाई और वर्तमान खेल समय जानना चाहते हैं। हमने पहले ही .currentTimeऊपर सीखा है, इसकी लंबाई जानने के लिए जिसका हम उपयोग करते हैं .duration।

उदाहरण गाइड

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

जब वर्तमान समय अपनी अवधि के बराबर होता है, तो ऑडियो फ़ाइल चलना बंद हो जाएगी। जब भी आप उपयोग play()करेंगे, यह शुरुआत से शुरू होगा।

timeupdateजब भी ऑडियो .currentTimeबदलता है, तो हम वर्तमान समय को अपडेट करने के लिए ईवेंट का उपयोग करते हैं।
हमने canplayइवेंट का उपयोग जानकारी को अपडेट करने के लिए किया जब फ़ाइल चलाने के लिए तैयार है।
हमने खेलने, रोकने, पुनरारंभ करने के लिए बटन बनाए।

$(document).ready(function() {
    var audioElement = document.createElement('audio');
    audioElement.setAttribute('src', 'http://www.soundjay.com/misc/sounds/bell-ringing-01.mp3');
    
    audioElement.addEventListener('ended', function() {
        this.play();
    }, false);
    
    audioElement.addEventListener("canplay",function(){
        $("#length").text("Duration:" + audioElement.duration + " seconds");
        $("#source").text("Source:" + audioElement.src);
        $("#status").text("Status: Ready to play").css("color","green");
    });
    
    audioElement.addEventListener("timeupdate",function(){
        $("#currentTime").text("Current second:" + audioElement.currentTime);
    });
    
    $('#play').click(function() {
        audioElement.play();
        $("#status").text("Status: Playing");
    });
    
    $('#pause').click(function() {
        audioElement.pause();
        $("#status").text("Status: Paused");
    });
    
    $('#restart').click(function() {
        audioElement.currentTime = 0;
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
    <h2>Sound Information</h2>
    <div id="length">Duration:</div>
    <div id="source">Source:</div>
    <div id="status" style="color:red;">Status: Loading</div>
    <hr>
    <h2>Control Buttons</h2>
    <button id="play">Play</button>
    <button id="pause">Pause</button>
    <button id="restart">Restart</button>
    <hr>
    <h2>Playing Information</h2>
    <div id="currentTime">0</div>
</body>

स्निपेट का विस्तार करें

— अहमत कर सकते हैं
स्रोत

1

और आपको इस स्क्रिप्ट को <body> *

— tbleckert

यहाँ एक मार्कअप है जो ज्यादातर सभी ब्राउज़र में काम करता है ।

— शैजुत

हालांकि, ओपी ने स्पष्ट रूप से कहा कि वह jQuery में ऐसा करना चाहता था। अपने उदाहरण में आप डोम हेरफेर और इवेंट श्रोताओं के लिए शुद्ध जावास्क्रिप्ट का उपयोग कर रहे हैं।

— जैक्स

मुझे इस स्निपेट के साथ एक समस्या है: एमपी 3 समाप्त होने पर मैं अपने आप ऑडियो कैसे रोक सकता हूं? अब, मेरे बहुत छोटे ऑडियो के साथ, यह लूप में ध्वनि करना जारी रखता है

— डोमोनिको मोनाको

1

@DomenicoMonaco बस उस endedघटना को हटा दें जो शुरुआत से ऑडियो चलाती है ।

— अहमत

45

$("#myAudioElement")[0].play();

यह काम नहीं $("#myAudioElement").play()करेगा जैसे आप उम्मीद करेंगे। आधिकारिक कारण यह है कि इसे jQuery में शामिल play()करने से हर एक तत्व में एक विधि जुड़ जाएगी , जिससे अनावश्यक ओवरहेड हो जाएगा। तो इसके बजाय आपको इसका संदर्भ डोम तत्वों की सरणी में अपनी स्थिति से देना होगा $("#myAudioElement"), जिसे आप पुनः प्राप्त कर रहे हैं , उर्फ 0।

यह उद्धरण उस बग के बारे में है जो इसके बारे में प्रस्तुत किया गया था, जिसे "फीचर / वॉन्टफिक्स" के रूप में बंद कर दिया गया था:

ऐसा करने के लिए हमें प्रत्येक DOM तत्व विधि के नाम के लिए एक jQuery विधि नाम जोड़ना होगा। और निश्चित रूप से यह विधि गैर-मीडिया तत्वों के लिए कुछ भी नहीं करेगी, इसलिए ऐसा नहीं लगता कि यह अतिरिक्त बाइट्स के लायक होगा जो इसे ले जाएगा।

— felwithe
स्रोत

3

धन्यवाद! ठीक वही जो मेरे द्वारा खोजा जा रहा था!

— utdrmac

21

किसी और के साथ आने के बाद, मैंने बस अहमत का जवाब लिया है और मूल पूछनेवाला के jsfiddle को यहां अद्यतन किया है , प्रतिस्थापन:

audio.mp3

के लिये

http://www.uscis.gov/files/nativedocuments/Track%2093.mp3

वेब से एक स्वतंत्र रूप से उपलब्ध एमपी 3 में लिंकिंग। आसान समाधान साझा करने के लिए धन्यवाद!

— टेक्सास-Bronius
स्रोत

उबंटू में फ़ायरफ़ॉक्स 42 पर काम करता है

— Bojan Kogoj

1

Chrome में इस jsfiiddle में लोड ईवेंट आग नहीं करता है। यह केवल ऑटोप्ले विशेषता के कारण खेलता है।

— टॉम

12

मेरे पास कमबैक के साथ एक अच्छा और बहुमुखी समाधान है:

<script type="text/javascript">
    var audiotypes={
        "mp3": "audio/mpeg",
        "mp4": "audio/mp4",
        "ogg": "audio/ogg",
        "wav": "audio/wav"
    }

    function ss_soundbits(sound){
        var audio_element = document.createElement('audio')
        if (audio_element.canPlayType){
            for (var i=0; i<arguments.length; i++){
                var source_element = document.createElement('source')
                source_element.setAttribute('src', arguments[i])
                if (arguments[i].match(/\.(\w+)$/i))
                    source_element.setAttribute('type', audiotypes[RegExp.$1])
                audio_element.appendChild(source_element)
            }
            audio_element.load()
            audio_element.playclip=function(){
                audio_element.pause()
                audio_element.currentTime=0
                audio_element.play()
            }
            return audio_element
        }
    }
</script>

उसके बाद आप जितने चाहें उतने ऑडियो इनिशियलाइज़ कर सकते हैं:

<script type="text/javascript" >
    var clicksound  = ss_soundbits('your/path/to/click.ogg', "your/path/to/click.mp3");
    var plopsound  = ss_soundbits('your/path/to/plopp.ogg', "your/path/to/plopp.mp3");
</script>

अब आप आरंभिक ऑडियो तत्व तक पहुँच सकते हैं जहाँ भी आप सरल ईवेंट कॉल पसंद करते हैं

onclick="clicksound.playclip()"

onmouseover="plopsound.playclip()"

— आंद्रे आर। कोहल
स्रोत

4

JSFiddle प्रदर्शन

यह वही है जो मैं JQuery के साथ उपयोग करता हूं:

$('.button').on('click', function () { 
    var obj = document.createElement("audio");
        obj.src = "linktoyourfile.wav"; 
        obj.play(); 
});

— जेफ
स्रोत

4

व्हाट अबाउट:

$('#play').click(function() {
  const audio = new Audio("https://freesound.org/data/previews/501/501690_1661766-lq.mp3");
  audio.play();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

स्निपेट का विस्तार करें

— लुइस डेविड
स्रोत

यह सबसे सरल तरीका है, एक आकर्षण की तरह काम करता है और यदि आप चाहते हैं तो आप वैनिला जेएस घटनाओं का उपयोग करके इस एक ही कार्रवाई को आग लगा सकते हैं।

— एंड्रिया मौरो