जावास्क्रिप्ट के साथ ऑडियो बजाना?

Question

मैं HTML5 और जावास्क्रिप्ट के साथ एक गेम बना रहा हूं।

मैं जावास्क्रिप्ट के माध्यम से गेम ऑडियो कैसे खेल सकता हूं?

Comments

चूंकि यह html5 है, इसलिए इसमें है <audio>। उस तत्व में 'प्ले', 'पॉज' आदि के लिए उपयुक्त जेएस हुक होंगे ...

— मार्क बी

@Marc क्या आप उन हुक के बारे में कुछ जानकारी दे सकते हैं?

— रयान एस।

मुझे यकीन है कि आप सोच रहे हैं कि दस्तावेज़ीकरण सभी ऑडियो विधियों के लिए कहां है: stackoverflow.com/questions/4589451/…

— ब्रायन डाउनिंग

Answer 1

यदि आप HTML तत्वों के साथ गड़बड़ नहीं करना चाहते हैं:

var audio = new Audio('audio_file.mp3');
audio.play();

function play() {
  var audio = new Audio('https://interactive-examples.mdn.mozilla.net/media/examples/t-rex-roar.mp3');
  audio.play();
}

<button onclick="play()">Play Audio</button>

यह HTMLAudioElementइंटरफ़ेस का उपयोग करता है, जो <audio>तत्व के समान ऑडियो चलाता है ।

---

यदि आपको अधिक कार्यक्षमता की आवश्यकता है, तो मैंने howler.js लाइब्रेरी का उपयोग किया और इसे सरल और उपयोगी पाया।

<script src="https://cdnjs.cloudflare.com/ajax/libs/howler/2.1.1/howler.min.js"></script>
<script>
    var sound = new Howl({
      src: ['https://interactive-examples.mdn.mozilla.net/media/examples/t-rex-roar.mp3'],
      volume: 0.5,
      onend: function () {
        alert('Finished!');
      }
    });
    sound.play()
</script>

Comments

यह विधि MP3 चलाने के लिए काम करती है लेकिन wav फ़ाइलों के लिए नहीं। क्या wav फ़ाइलों को चलाने का कोई तरीका है?

— user781486

@ user3293156 यह विधि HTML5 के समान स्वरूपों का समर्थन करती है <audio>। विकिपीडिया में एक ऑडियो प्रारूप संगतता तालिका है । new Audio()इंटरनेट एक्सप्लोरर को छोड़कर सभी ब्राउज़रों में WAV फ़ाइलें चला सकते हैं।

— रोरी ओ'केन

@ RoryO'Kane इसलिए हर कोई Microsoft के अलावा Microsoft के ऑडियो प्रारूप को चला सकता है? lol

— डेव कजिनो

युगल कैविएट: (1) फ़ायरफ़ॉक्स एमपी 3 नहीं बजाएगा । आपको इसके बजाय एक ओग फ़ाइल की आवश्यकता होगी। (2) सफ़ारी / iOS तब नहीं चलेगा जब आप https पर सामग्री परोस रहे हों । आपके पास एक वैध प्रमाणपत्र होना चाहिए।

— पीटर

ध्यान दें कि Chrome पर अप्रैल 2018 से ऑडियो फ़ाइलें तब तक नहीं चलेंगी जब तक कि उपयोगकर्ता ने दस्तावेज़ में कम से कम एक बार क्लिक नहीं किया हो। देखें यहाँ ।

— निल्स लिंडमैन

Answer 2

यह आसान है, बस अपना audioतत्व प्राप्त करें और play()विधि को कॉल करें :

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

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

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

Answer 3

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

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

यह 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');
    });
</script>

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

Comments

आम तौर पर जब आप इस वेबसाइट पर एक लिंक देते हैं, तो आप अपने पोस्ट के लिंक से कुछ जानकारी प्रदान करते हैं। यह सिर्फ एक सरल लिंक पोस्ट करने के लिए हतोत्साहित किया गया है और कहा गया है "इसे क्लिक करें।"

— रेयान एस।

क्षमा करें, मुझे लगा कि साइट खुद को समझा देगी। मैं इसे तब संपादित

— करूंगा

Answer 4

यह एक बहुत पुराना सवाल है, लेकिन मैं कुछ उपयोगी जानकारी जोड़ना चाहता हूं। विषय स्टार्टर ने उल्लेख किया है कि वह है "making a game"। तो खेल विकास के लिए ऑडियो की जरूरत वाले हर व्यक्ति के लिए सिर्फ एक <audio>टैग या ए की तुलना में बेहतर विकल्प है HTMLAudioElement। मुझे लगता है कि आपको वेब ऑडियो एपीआई के उपयोग पर विचार करना चाहिए :

जबकि वेब पर ऑडियो को अब एक प्लगइन की आवश्यकता नहीं है, ऑडियो टैग परिष्कृत खेल और इंटरैक्टिव अनुप्रयोगों को लागू करने के लिए महत्वपूर्ण सीमाएं लाता है। वेब ऑडियो एपीआई वेब अनुप्रयोगों में ऑडियो को संसाधित और संश्लेषित करने के लिए एक उच्च-स्तरीय जावास्क्रिप्ट एपीआई है। इस एपीआई का लक्ष्य आधुनिक गेम ऑडियो इंजनों में पाई जाने वाली क्षमताओं और कुछ मिश्रण, प्रसंस्करण और फ़िल्टरिंग कार्यों को शामिल करना है जो आधुनिक डेस्कटॉप ऑडियो उत्पादन अनुप्रयोगों में पाए जाते हैं।

Answer 5

Jquery के साथ आसान

// बिना किसी प्रीलोड वाले ऑडियो टैग सेट करें

<audio class="my_audio" controls preload="none">
    <source src="audio/my_song.mp3" type="audio/mpeg">
    <source src="audio/my_song.ogg" type="audio/ogg">
</audio>

// लोड करने के लिए jquery जोड़ें

$(".my_audio").trigger('load');

// खेलने और रोकने के तरीके लिखें

function play_audio(task) {
      if(task == 'play'){
           $(".my_audio").trigger('play');
      }
      if(task == 'stop'){
           $(".my_audio").trigger('pause');
           $(".my_audio").prop("currentTime",0);
      }
 }

// तय करें कि ऑडियो को कैसे नियंत्रित किया जाए

<button onclick="play_audio('play')">PLAY</button>
<button onclick="play_audio('stop')">STOP</button>

संपादित करें

@ पेट के सवाल को संबोधित करने के लिए, यहां बताया गया है कि आप इस दृष्टिकोण का उपयोग प्लेलिस्ट खेलने के लिए कैसे करेंगे :

एक वस्तु में अपने गाने सेट करें:

playlist = {
    'song_1' : 'audio/splat.mp3',
    'song_2' : 'audio/saw.mp3',
    'song_3' : 'audio/marbles.mp3',
    'song_4' : 'audio/seagulls.mp3',
    'song_5' : 'audio/plane.mp3'
}

ट्रिगर का उपयोग करें और पहले की तरह कार्य करें:

$(".my_audio").trigger('load');

function play_audio(task) {
      if(task == 'play'){
           $(".my_audio").trigger('play');
      }
      if(task == 'stop'){
           $(".my_audio").trigger('pause');
           $(".my_audio").prop("currentTime",0);
      }
 }

पहले गीत को गतिशील रूप से लोड करें:

keys = Object.keys(playlist);
$('.my_audio').append("<source id='sound_src' src=" + playlist[keys[0]] + " type='audio/mpeg'>");

प्लेलिस्ट में अगले गीत के लिए ऑडियो स्रोत रीसेट करें, जब वर्तमान गीत समाप्त होता है:

count = 0; 
$('.my_audio').on('ended', function() { 
   count++;  
   $("#sound_src").attr("src", playlist[keys[count]])[0];
   $(".my_audio").trigger('load');
   play_audio('play');
});

कार्रवाई में इस कोड के उदाहरण के लिए यहां देखें ।

Comments

यह एक ही समय में क्लास = "my_audio" के साथ सभी ऑडियो टैग बजाता है। आप एक के बाद एक (एक नाटक सूची में) कैसे खेलते हैं?

— पेट

@stomy आपने इसे पोस्ट किया क्योंकि यह StackOverflow पर अपना प्रश्न है? यदि आप करेंगे तो, मुझे बता देना। मैं आपकी मदद कर सकता हूं। अन्यथा, मैं इसे पेश करूंगा - आप (एक गाना बजाना शुरू करने के बाद) endedईवेंट को उत्सर्जित करने के लिए सुन सकते हैं और सूची में अगली ऑडियो फ़ाइल शुरू कर सकते हैं (संभवतः आप डोम, जेएस मेमोरी, आदि में या तो ट्रैक कर रहे हैं) )। developer.mozilla.org/en-US/docs/Web/Events/ended

— Sgnl

@stomy कृपया एक नाटक सूची बनाने के लिए मेरे उत्तर में EDIT की जाँच करें जो लगातार गाने बजाता है।

— साइबरनेटिक

Answer 6

एक छिपा हुआ ऑडियो जोड़ें और इसे चलाएं।

function playSound(url){
  var audio = document.createElement('audio');
  audio.style.display = "none";
  audio.src = url;
  audio.autoplay = true;
  audio.onended = function(){
    audio.remove() //Remove when played.
  };
  document.body.appendChild(audio);
}

Answer 7

यदि आपको निम्न त्रुटि मिल रही है:

अनकैप्ड (वादा में) DOMException: play () विफल रहा क्योंकि उपयोगकर्ता ने पहले दस्तावेज़ के साथ बातचीत नहीं की थी।

इसका मतलब है कि उपयोगकर्ता को पहले वेबसाइट के साथ बातचीत करने की आवश्यकता है (जैसा कि त्रुटि संदेश कहता है)। इस मामले में आपको clickकिसी अन्य ईवेंट श्रोता का उपयोग करने की आवश्यकता है , इसलिए उपयोगकर्ता आपकी वेबसाइट के साथ बातचीत कर सकता है।

यदि आप ऑडियो लोड करना चाहते हैं और उपयोगकर्ता को पहले दस्तावेज़ के साथ सहभागिता नहीं करनी है, तो आप उपयोग कर सकते हैं setTimeout।

setTimeout(() => {
  document.getElementById('mySound').play();
}, 500)

<audio id="mySound" src="sound.mp3"></audio>

0.5 सेकंड के बाद ध्वनि शुरू हो जाएगी।

Comments

यह काम नहीं करता है। क्रोम में नहीं। अब और नहीं।

— अरफियो

Answer 8

new Audio('./file.mp3').play()

Answer 9

var song = new Audio();
song.src = 'file.mp3';
song.play();

Comments

आसान और काम कोड।

— अर्श खान

Answer 10

यदि आपके पास नीचे की तरह एक HTML टैग है तो बहुत ही सरल उपाय:

<audio id="myAudio" src="some_audio.mp3"></audio>

इसे खेलने के लिए जावास्क्रिप्ट का उपयोग करें, जैसे:

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

Comments

क्या आपका मतलब </a> या </ ऑडियो> का उपयोग करना है। बस उत्सुक।

— कूपर

मैंने <ऑडियो> टैग का उपयोग किया।

— बेन स्टैफ़ोर्ड

बेन, आपके उदाहरण में एक गलत समापन टैग था यही कारण है कि @Cooper ने यह प्रश्न पूछा था। मैंने सही समापन टैग के साथ उत्तर को संपादित किया।

— Sgnl

Answer 11

मेरे पास ऑडियो वादा वस्तु से संबंधित कुछ मुद्दे थे रिटर्न और ध्वनियों के साथ उपयोगकर्ता इंटरैक्शन से जुड़े कुछ मुद्दे हैं जो मैं इस छोटी वस्तु का उपयोग करके समाप्त करता हूं,

मैं खेल को कार्यान्वित करने के लिए सुझाव दूंगा जो कि उपयोगकर्ता द्वारा उपयोग किए जा रहे इंटरैक्शन इवेंट के सबसे करीब लगता है।

var soundPlayer = {
  audio: null,
  muted: false,
  playing: false,
  _ppromis: null,
  puse: function () {
      this.audio.pause();
  },
  play: function (file) {
      if (this.muted) {
          return false;
      }
      if (!this.audio && this.playing === false) {
          this.audio = new Audio(file);
          this._ppromis = this.audio.play();
          this.playing = true;

          if (this._ppromis !== undefined) {
              this._ppromis.then(function () {
                  soundPlayer.playing = false;
              });
          }

      } else if (!this.playing) {

          this.playing = true;
          this.audio.src = file;
          this._ppromis = soundPlayer.audio.play();
          this._ppromis.then(function () {
              soundPlayer.playing = false;
          });
      }
  }
};

और इसे निम्नानुसार कार्यान्वित करें:

<button onclick="soundPlayer.play('https://interactive-examples.mdn.mozilla.net/media/examples/t-rex-roar.mp3');">Play</button>

Comments

यदि मैं जेएस से ऑटोप्ले ट्रिगर करता हूं तो सफारी पर काम नहीं कर रहा हूं।

— maki10

@ maki10 हाय, मैंने इसे सफारी डेस्कटॉप संस्करण 12.0.3 (14606.4.5) में परीक्षण किया और यह यहां काम करता है: jsfiddle.net/xf5zyv4q/5

— talsibony

इसके अलावा सफारी मोबाइल IOS 12

— talsibony

मैं अपनी समस्या के लिए लिंक अपडेट करता हूं jsfiddle.net/6431mfb5 । मेरे लिए, ऑटोप्ले पहली बार केवल सफारी और नए और अधिक काम करते हैं।

— maki10

@ maki10 क्योंकि आप इसे उपयोगकर्ता के इंटरैक्शन के बिना कहते हैं, क्लिक टच जैसे उपयोगकर्ता के इंटरैक्शन के बिना ऑटोप्ले अभ्यस्त काम करते हैं, अंतिम पंक्ति को हटाते हैं: soundPlayer.play (' इंटरैक्टिव- examples.mdn.mozilla.net/media.examples/… );

— talsibony

Answer 12

मैंने इस पद्धति का उपयोग ध्वनि चलाने के लिए किया है ...

var audioElement;
if(!audioElement) {
  audioElement = document.createElement('audio');
  audioElement.innerHTML = '<source src="' + '/audio/sound.mp3'+ '" type="audio/mpeg" />'
}
audioElement.play();

Answer 13

सुरक्षा आवश्यकताओं के साथ जो उपयोगकर्ता को ऑडियो के लिए एक वेबपेज के साथ बातचीत करनी चाहिए, यह अनुमति दी जाती है कि इस साइट पर सहित कई लेखों को पढ़ने के आधार पर मैं इसे कैसे करूं।

1. अपने HTML में आवश्यक ऑडियो फाइलों को परिभाषित करें
2. ऑनक्लिक के साथ एक स्टार्ट गेम बटन रखें
3. जब बटन पर क्लिक किया जाता है तो खेलें और रोकें सभी ऑडियो फाइलों को उस पट्टी पर रखें जिसे आप शुरुआत में खेलना चाहते हैं

क्योंकि सभी ऑडियो फाइलें एक ही ओनक्लिक पर "प्ले" की गई हैं, आप अब उन्हें गेम में बिना किसी प्रतिबंध के खेल सकते हैं

ध्यान दें कि सर्वोत्तम संगतता के लिए wav फ़ाइलों का उपयोग न करें, MS उनका समर्थन नहीं करता है

एमपी 3 और ओग का उपयोग करें, जो सभी उपकरणों को कवर करता है

उदाहरण:

<audio id="welcome">
    <source src="URL/welcome.ogg" type="audio/ogg">
    <source src="URL/welcome.mp3" type="audio/mpeg">
    Your browser does not support the audio element.
</audio>

खेल में सभी ऑडियो के लिए आवश्यकतानुसार दोहराएं

फिर:

document.getElementById("welcome").play();
document.getElementById("welcome").pause();

खेल शुरू होने पर आप जिस ऑडियो को सुनना चाहते हैं, उसे छोड़ कर आवश्यकतानुसार दोहराएं

Answer 14

अगर आप अपना ऑडियो खेलना चाहते हैं जब भी पेज खुलता है तो इस तरह से करें।

<script>
  function playMusic(){
  music.play();
  }
  </script>
<html>
  <audio id="music" loop src="sounds/music.wav" autoplay> </audio>
  </html>

और जब भी आपको अपने गेम कोड में इस playMusic () को कॉल करना हो।

Answer 15

ध्वनियों को बजाने के लिए आप वेब ऑडियो एपीआई का उपयोग कर सकते हैं। वहाँ कुछ ऑडियो लाइब्रेरी हैं जैसे कि howler.js, soundjs आदि। यदि आप पुराने ब्राउज़रों के बारे में चिंता नहीं करते हैं, तो आप http://musquitojs.com/ पर भी देख सकते हैं । यह लगता है बनाने और खेलने के लिए एक सरल एपीआई प्रदान करता है।

उदाहरण के लिए, एक ध्वनि खेलने के लिए आपको बस इतना करना है।

import $buzz from 'musquito';

const buzz = $buzz('gunfire.mp3');

buzz.play();

पुस्तकालय ऑडियो स्प्राइट्स का भी समर्थन करता है।

Answer 16

यह कुछ जेएस आई है जिसके साथ काम करने वाली बेबी एआई प्रोजेक्ट इम पर आया था। मुझे आशा है कि यह आपकी मदद करने में सक्षम है।

<!DOCTYPE html>
<html>
<head>
    <title>
        js prompt AI
    </title>
    <style>
        #button {
            border: 1px solid black;
            border-radius: 10px;
            font-size: 22px;
            height:65px;
            width:100px;
            text-align: center;
            line-height: 65px;
        }
    </style>
</head>
<body>

    <audio id="myAudio" src="./how_are_you.m4a"></audio>
    <p>To Interact with the AI please click the button</p>
    <div id=button>click</div>

    <script>

       var button = document.getElementById("button");
       function playBack() {
           button.addEventListener("click", function (){
            var talk = prompt("If you wish for the AI to respond type hi");
            var myAudio = document.getElementById("myAudio");

            if(talk === "hi") {
                    myAudio.play();
            }
           }) ;



       }
       playBack();
   </script>
</body>

</html>

Answer 17

बस इस का उपयोग करें:

<video controls="" autoplay="" name="media"><source src="Sound URL Here" type="audio/mpeg" /></video>

या, इसे सरल बनाने के लिए:

<video controls="" autoplay="" name="media">

<source src="Sound URL Here" type="audio/mpeg" />

</video>

नमूना:

<video controls="" autoplay="" name="media">
<source src="https://interactive-examples.mdn.mozilla.net/media/examples/t-rex-roar.mp3" type="audio/mpeg">
</video>

अगर कोई Chrome 73 के अलावा अन्य ब्राउज़र पर काम करता है तो कोई IDEA न करें !!

Comments

यह एक आसान, साफ जवाब है। सभी पर कोई jquery !!

— IMSMART

Answer 18

मेरे पास ऑडियो चलाने के साथ कुछ समस्याएं थीं, खासकर जब से क्रोम ने अपडेट किया है कि उपयोगकर्ता को पहले दस्तावेज़ के साथ बातचीत करनी है।

हालाँकि, लगभग सभी समाधानों में मैंने पाया है कि ऑडियो को चलाने के लिए उपयोगकर्ता को प्राप्त करने के लिए JS कोड को सक्रिय रूप से श्रोताओं (जैसे बटन क्लिक) को सेट करना पड़ता है।

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

const stopAttempt = setInterval(() => {
    const audio = new Audio('your_audio_url_or_file_name.mp3');
    const playPromise = audio.play();
    if (playPromise) {
      playPromise.then(() => {
        clearInterval(stopAttempt)
      }).catch(e=>{
        console.log('' + e);
      })
    }
}, 100 )

Answer 19

यहाँ वर्ष 2020 के लिए एक समाधान है जब आप त्रुटि देख रहे हैं:

[त्रुटि] अनहेल्दी प्रॉमिस रिजेक्शन: NotSupportedError: ऑपरेशन समर्थित नहीं है। (अनाम फ़ंक्शन) अस्वीकार करें प्ले (अनाम फ़ंक्शन) (testaudio.html: 96) प्रेषण (jquery-3.4.1.min.js: 2: 42577)

---

<div onclick="new Audio('/assets/test.mp3').play()">aaa</div>

स्लीक मत बनो और ऊह सोचो कि यह एक पुराना स्कूल है oclick, मैं बस उस पेज को अपने jQuery या मेरी बाहरी जावास्क्रिप्ट फ़ाइल पर ले जाऊंगा। नहीं। यह एक होने की जरूरत है onclick।