একটি বোতাম ক্লিক করা হলে jQuery ব্যবহার করে একটি অডিও ফাইল খেলুন

Question 1

আমি বোতামটি ক্লিক করার সময় একটি অডিও ফাইল চালানোর চেষ্টা করছি, কিন্তু এটি কাজ করছে না, আমার এইচটিএমএল কোডটি হ'ল:

<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();
        });
    });
});

আমিও তার জন্য একটি ফিডল তৈরি করেছি ।

Question 2

কোন পন্থা?

আপনি অডিও প্লে করতে পারেন <audio>ট্যাগ বা <object>বা <embed>। অলস লোডিং (যখন আপনার প্রয়োজন হবে তখন লোড করুন) এর আকার যদি ছোট হয় তবে শব্দটি সবচেয়ে ভাল পদ্ধতির। আপনি অডিও উপাদানটি গতিশীলভাবে তৈরি করতে পারেন, যখন এটি লোড হয় আপনি এটিকে দিয়ে শুরু করতে .play()এবং এটিকে থামিয়ে দিতে পারেন .pause()।

জিনিস আমরা ব্যবহার

আমরা canplayআমাদের ফাইলটি খেলতে প্রস্তুত তা সনাক্ত করতে ইভেন্টটি ব্যবহার করব ।

.stop()অডিও উপাদানগুলির জন্য কোনও ফাংশন নেই । আমরা কেবল তাদের বিরতি দিতে পারি। এবং যখন আমরা অডিও ফাইলের শুরু থেকে শুরু করতে চাই তখন আমরা এটি পরিবর্তন করি .currentTime। আমরা আমাদের উদাহরণে এই লাইনটি ব্যবহার করব audioElement.currentTime = 0;। .stop()ফাংশনটি অর্জন করতে আমরা প্রথমে ফাইলটি বিরতি দিয়ে তার সময়টি পুনরায় সেট করি।

আমরা অডিও ফাইলটির দৈর্ঘ্য এবং বর্তমান প্লে করার সময় জানতে চাইতে পারি। আমরা .currentTimeএর দৈর্ঘ্যটি ব্যবহার করতে শিখতে আমরা ইতিমধ্যে উপরে শিখেছি .duration।

উদাহরণ গাইড

ডকুমেন্ট প্রস্তুত হয়ে গেলে আমরা গতিশীলভাবে একটি অডিও উপাদান তৈরি করি
আমরা যে অডিওটি খেলতে চাই তার সাথে আমরা এর উত্স সেট করেছি।
আমরা আবার ফাইল শুরু করতে 'সমাপ্ত' ইভেন্টটি ব্যবহার করেছি।

যখন বর্তমান সময়টি তার সময়কালের সমান হয় তখন অডিও ফাইল বাজানো বন্ধ হয়ে যায়। আপনি যখনই ব্যবহার play()করবেন এটি শুরু থেকেই শুরু হবে।

timeupdateযখনই অডিও .currentTimeপরিবর্তন হয় আমরা বর্তমান সময় আপডেট করতে ইভেন্ট ব্যবহার করি used
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>

স্নিপেট প্রসারিত করুন

Question 3

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

এটি $("#myAudioElement").play()আপনার প্রত্যাশা মতো কাজ করে না । অফিশিয়াল কারণ হ'ল এটিকে jQuery এ অন্তর্ভুক্ত play()করা প্রতিটি একক উপাদানে একটি পদ্ধতি যুক্ত করবে , যা অপ্রয়োজনীয় ওভারহেডের কারণ হতে পারে। সুতরাং পরিবর্তে আপনাকে এটি ডিওএম উপাদানগুলির অ্যারেতে এর অবস্থানের দ্বারা উল্লেখ করতে হবে যা আপনি $("#myAudioElement")ওরফে 0 দিয়ে পুনরুদ্ধার করছেন ।

এই উদ্ধৃতিটি এটি সম্পর্কিত একটি বাগ থেকে এসেছে যা "বৈশিষ্ট্য / wontfix" হিসাবে বন্ধ ছিল:

এটি করতে আমাদের প্রতিটি ডিওএম উপাদান পদ্ধতির নামের জন্য একটি jQuery পদ্ধতির নাম যুক্ত করতে চাই। এবং অবশ্যই সেই পদ্ধতিটি অ-মিডিয়া উপাদানগুলির জন্য কিছুই করবে না বলে মনে হয় না যে এটি অতিরিক্ত বাইটগুলি গ্রহণ করবে।

Question 4

অন্য কারও সাথে অনুসরণ করার জন্য, আমি কেবল আহমেটের উত্তর নিয়েছি এবং মূল জিজ্ঞাসকের জেসফিডেলটি এখানে স্থির করে আপডেট করেছি :

audio.mp3

জন্য

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

ওয়েব থেকে নিখরচায় উপলভ্য এমপি 3-তে লিঙ্ক করা। সহজ সমাধান ভাগ করে নেওয়ার জন্য আপনাকে ধন্যবাদ!

Question 5

আমার এখানে ফ্যালব্যাক সহ একটি দুর্দান্ত এবং বহুমুখী সমাধান রয়েছে:

<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()"

Question 6

জেএসফিডাল বিক্ষোভ

এটি আমি জিকুয়েরির সাথে ব্যবহার করি:

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

Question 7

কি সম্পর্কে:

$('#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>

স্নিপেট প্রসারিত করুন