এইচটিএমএল 5 অডিও স্টপ ফাংশন

Question

আমি আমার নেভিগেশনে প্রতিটি লিঙ্কের ক্লিকে একটি ছোট অডিও ক্লিপ খেলছি

এইচটিএমএল কোড:

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

এখন পর্যন্ত এটি ঠিকঠাক কাজ করছে।

ইস্যুটি তখনই যখন একটি শব্দ ক্লিপ ইতিমধ্যে চলছে এবং আমি কোনও লিঙ্কে ক্লিক করি কিছুই ঘটে না।

আমি লিঙ্কের ক্লিকে ইতিমধ্যে বাজানো শব্দ বন্ধ করার চেষ্টা করেছি, তবে HTML5 এর অডিও এপিআইতে এর জন্য সরাসরি কোনও ইভেন্ট নেই

আমি কোড অনুসরণ করার চেষ্টা করেছি কিন্তু এটি কাজ করছে না

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

কোন পরামর্শ দয়া করে?

Answer 1

পরিবর্তে stop()আপনি চেষ্টা করে দেখতে পারেন:

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

এটির কাঙ্ক্ষিত প্রভাব থাকতে হবে।

Comments

এটি ক্রোমে কাজ করছে না। অডিও উপাদানটি অডিও লোড করে রাখে, যা হওয়া উচিত তা নয়।

— পিটার

Chrome এ <audio>সঙ্গে আরো লোড রাখে preloadবাধ্য অ্যাট্রিবিউট noneএবং <source>এর src আউট ছিনতাই।

— পাইওনিয়ার স্কাইস

ধন্যবাদ, ধন্যবাদ। পার্শ্ব নোটে আমি জানতে আগ্রহী যে ডাব্লু 3 সি কেন অনুমানটিতে কোনও স্টপ পদ্ধতি অন্তর্ভুক্ত না করার সিদ্ধান্ত নিয়েছে।

— রিহেরিক

Answer 2

প্রথমে আপনাকে আপনার অডিও উপাদানটির জন্য একটি আইডি সেট করতে হবে

আপনার জেএসে:

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

var oldSrc = ply.src;// শুধু পুরানো উত্স মনে রাখা

ply.src = "";// প্লেয়ারটি থামাতে আপনাকে উত্সটি কোনও কিছুই দিয়ে প্রতিস্থাপন করতে হবে

Comments

অডিও স্ট্রিমিংয়ের সেরা সমাধান

— হোসেইন

ঠিক আছে..এই অডিও সোর্স ফাইলটির জন্য অন্য একটি নেটওয়ার্ক অনুরোধ জানাবে

— মোঃ আরাফাত আল মাহমুদ

লোড হওয়া অবধি অডিও চলবে না এবং এর ফলে অডিও বাজতে অযাচিত দেরি হবে।

— অভি

ইন্টারনেট রেডিও এবং ফায়ারফক্সের মতো একটি স্ট্রিম খেললে সমস্যার একটি দুর্দান্ত সমাধান যখন বিরতি / প্লে টগল করা হয় তখন শেষ অংশটি পুনরাবৃত্তি করে। আপনাকে অনেক ধন্যবাদ.

— নামিকিরি

Answer 3

এখানে আমার স্টপ () পদ্ধতি করার পদ্ধতিটি রয়েছে:

কোথাও কোডে:

audioCh1: document.createElement("audio");

এবং তারপরে ():

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

এইভাবে আমরা অতিরিক্ত অনুরোধ তৈরি করতে পারি না, পুরানোটি বাতিল হয়ে গেছে এবং আমাদের অডিও উপাদানটি পরিষ্কার অবস্থায় রয়েছে (ক্রোম এবং এফএফ পরীক্ষিত):>

Answer 4

আমি একই সমস্যা ছিল। একটি স্টপ স্ট্রিমটি বন্ধ করে দেওয়া উচিত এবং এটি যদি রেডিও হয় তবে অনপ্লে লাইভ হয়। আমি যে সমস্ত সমাধান দেখেছি তার অসুবিধা ছিল :

• 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>

Comments

এটি ক্রোম এবং ফায়ারফক্সে কাজ করে। যাইহোক, ফায়ারফক্সে এটি নিম্নলিখিত ত্রুটির ফলাফল করে (কনসোলে) [ Security Error: Content at https://localhost/url.html may not load data from blob:https://localhost/cac32534-78b0-4a62-8355-cc8f1e708d64.] কোডটি এর পরে কার্যকর করা অব্যাহত থাকায় এটির কোনও নেতিবাচক প্রভাব আছে বলে মনে হয় না (অবিচ্ছিন্ন ব্যতিক্রম ব্যতীত)।

— ব্রেডি

Answer 5

এই পদ্ধতিটি কাজ করে:

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

আমার কাছে এটি একটি জাভাস্ক্রিপ্ট ফাইলে রয়েছে "অডিওপ্লাস.জেএস" যা আমি আমার এইচটিএমএলে অন্তর্ভুক্ত করি কোনও অডিওর সাথে কাজ করার জন্য কোনও স্ক্রিপ্টের আগে।

তারপরে আপনি অডিও অবজেক্টগুলিতে স্টপ ফাংশনটি কল করতে পারেন:

audio.stop();

"ক্যানপ্লেথ্রু" সহ শেষ ক্রোম ইস্যু:

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

সুতরাং সমাধানটি, আপনি যখন কোনও ইভেন্ট শ্রোতার সাথে সংযুক্ত করে থাকেন তখন একই রকম সমাধান যা আপনি সত্যিই নিশ্চিত করতে চান যে এটি আবার ট্রিগার নয় call প্রথম কলের পরে ইভেন্ট শ্রোতাকে অপসারণ করা। এটার মতো কিছু:

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

Comments

function stopAudio(audio) { audio.pause(); this.audioStream.src = ""; } এটি করা আমার পক্ষে কাজ করে এবং ক্রোম ব্রাউজারে স্পিকার আইকনটি সরিয়ে ফেলা হয় যা পৃষ্ঠায় অডিও বাজানোর সময় উপস্থিত হয়। Chrome সংস্করণ 59.0.3071.109

— lasec0203

সাধারণভাবে, আমি এই জাতীয় প্রোটোটাইপগুলি বাড়ানোর পরামর্শ দেব না। একটি অডিও-ভারী অ্যাপ্লিকেশনটির বিভিন্ন ক্ষেত্রে বিভিন্ন স্টপ ফাংশন থাকতে পারে এবং প্রোটোটাইপগুলির সাথে

— জগাখিচির

Answer 6

আমার নিজের জাভাস্ক্রিপ্ট ফাংশন থেকে টগল প্লে / পজ করুন - যেহেতু আমি একটি রেডিও স্ট্রিম পরিচালনা করছি, তাই আমি এটি বাফারটি সাফ করতে চেয়েছিলাম যাতে শ্রোতা রেডিও স্টেশনটির সাথে সিঙ্ক থেকে বেরিয়ে না আসে।

function playStream() {

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

        (player.paused == true) ? toggle(0) : toggle(1);

}

function toggle(state) {

        var player = document.getElementById('player');
        var link = document.getElementById('radio-link');
        var src = "http://192.81.248.91:8159/;";

        switch(state) {
                case 0:
                        player.src = src;
                        player.load();
                        player.play();
                        link.innerHTML = 'Pause';
                        player_state = 1;
                        break;
                case 1:
                        player.pause();
                        player.currentTime = 0;
                        player.src = '';
                        link.innerHTML = 'Play';
                        player_state = 0;
                        break;
        }
}

দেখা যাচ্ছে, কেবল বর্তমান টাইম সাফ করা Chrome এর অধীনে কাটবে না, উত্সটি সাফ করার জন্য এবং এটিকে আবার লোড করার প্রয়োজন needed আশা করি এটি সহায়তা করবে Hope

Answer 7

পার্শ্ব নোট হিসাবে এবং কারণ আমি সম্প্রতি এই লিঙ্কটি অনুসারে গ্রহণযোগ্য উত্তরে প্রদত্ত স্টপ পদ্ধতিটি ব্যবহার করছি:

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

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

Answer 8

এটি ক্রোমে কখনও কখনও কাজ করে না,

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

ঠিক এর মত বদলাও,

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

Answer 9

শ্যামঞ্জেরজ লিখেছেন:

কারেন্টটাইম ম্যানুয়ালি সেট করে কেউ অডিও এলিমেন্টে 'ক্যানপ্লেথ্রু' ইভেন্টটি চালিয়ে দিতে পারে।

এটি প্রকৃতপক্ষে যা ঘটবে তা হ'ল, এবং বিরতি দেওয়া pauseঘটনাটিকেও ট্রিগার করবে , উভয়ই এই কৌশলটিকে "স্টপ" পদ্ধতি হিসাবে ব্যবহারের জন্য অনুপযুক্ত করে তোলে। অধিকন্তু, সেটিং srcহিসাবে জাকি দ্বারা প্রস্তাবিত বর্তমান পৃষ্ঠার URL একটি মিডিয়া ফাইল হিসাবে লোড করতে (এবং ব্যর্থ) খেলোয়াড় চেষ্টা করতে হবে যদি autoplayসক্রিয় করা হয় - সেটিং srcকরার nullঅনুমতি দেওয়া হয় না; এটি সর্বদা একটি URL হিসাবে বিবেচিত হবে treated প্লেয়ারের অবজেক্টকে ধ্বংস করার সংক্ষিপ্ততা "স্টপ" পদ্ধতি সরবরাহ করার কোনও ভাল উপায় বলে মনে হচ্ছে না, তাই আমি কেবলমাত্র ডেডিকেটেড স্টপ বোতামটি ফেলে দিয়ে বিরতি দিতে এবং তার পরিবর্তে ফিরে বোতামগুলি ছেড়ে দেওয়ার পরামর্শ দিচ্ছি - স্টপ বোতামটি আসলে কোনও কার্যকারিতা যুক্ত করবে না ।

Answer 10

এই পদ্ধতিরটি "ব্রুট ফোর্স", তবে এটি jQuery "অনুমোদিত" ব্যবহার করে ধরে নিয়ে কাজ করে। আপনার "প্লেয়ার <audio></audio>" ট্যাগকে একটি ডিভ দিয়ে ঘিরে নিন (এখানে "প্লোল্ডার" এর আইডি সহ)।

<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
}

Comments

একই জিনিসটি জাকির দ্বারা উপরের তার উত্তরে ব্যাখ্যা করা হয়েছে, জ্যাকুরির ব্যবহার ছাড়াই।

— অলোক জৈন

আমি এটি নিয়ে পরীক্ষা করিনি, তবে আমি নিশ্চিত ছিলাম না যে সেখানে একাধিক <সোর্স> ট্যাগ থাকলে তার পদ্ধতিটি কাজ করবে।

— ব্যবহারকারী 3062615

#FlHolderএকটি ত্রুটি লক্ষ্য বলে মনে হয়#plHolder

— পাইওনিয়ার আকাশ

@ অলোক-জেইন মন্তব্যের উত্তরে: আমি মনে করি এই উত্তরটি @ জাকির উত্তর থেকে সম্পূর্ণ আলাদা। এখানে আমরা ডিওমে একটি উপাদান পুনরায় রেন্ডার করছি, অন্য উত্তরে তিনি srcপ্লেয়ারটির বৈশিষ্ট্যটি কেবল "কম্বলিং" করছেন ।

— পাইওনিয়ার স্কাইস

Answer 11

আমি বিশ্বাস করি যে অডিওটি রাষ্ট্র চালাচ্ছে কিনা তা যাচাই করা ভাল এবং বর্তমানের সময়ের সম্পত্তিটি পুনরায় সেট করা ভাল।

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

Answer 12

আমার জন্য যে কোড কাজ করে। (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">...

এই সাহায্য আশা করি।

Answer 13

আমি যা করতে চাই তা হ'ল অ্যাঙ্গুলার 2 ব্যবহার করে নিয়ন্ত্রণটি পুরোপুরি সরিয়ে ফেলা হয় তারপরে যখন পরবর্তী গানের অডিও পথ থাকে তখন তা পুনরায় লোড করা হয়:

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

তারপরে যখন আমি কোডে এটি আনলোড করতে চাই তখন আমি এটি করি:

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

পরবর্তী গানটি বরাদ্দ করা হলে, নিয়ন্ত্রণটি পুরোপুরি স্ক্র্যাচ থেকে পুরোপুরি পুনরায় তৈরি করা হয়:

this.song = this.songOnDeck;

Answer 14

এই ত্রুটিটি ঘুরে দেখার সহজ উপায় হ'ল ত্রুটিটি ধরা।

অডিওলেটমেন্ট.প্লে () কোনও প্রতিশ্রুতি দেয়, সুতরাং .catch () সহ নিম্নলিখিত কোডটি এই সমস্যাটি পরিচালনা করতে যথেষ্ট হবে:

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

দ্রষ্টব্য: আপনি পিছনে সামঞ্জস্যের জন্য বেনাম ফাংশন সহ তীর ফাংশনটি প্রতিস্থাপন করতে চাইতে পারেন।