ब्राउज़र में जावास्क्रिप्ट के साथ ऑडियो बाइट सरणी (फ़ाइल नहीं!) कैसे खेलें

Question

ज्यादातर सुरक्षा कारणों से, मुझे किसी ब्राउज़र द्वारा सर्वर पर एक्सेस करने के लिए सर्वर पर WAV फ़ाइल स्टोर करने की अनुमति नहीं है। मेरे पास एक बाइट सरणी है जिसमें सेवर पर ऑडियो डेटा (डब्ल्यूएवी फाइल का मान हिस्सा है) का डेटा हिस्सा है, और मैं जावास्क्रिप्ट (या ऐप्पल लेकिन जेएस पसंदीदा) के माध्यम से ब्राउज़र पर खेला जाना चाहता हूं, मैं JSON- पीआरसी पूरे बाइट [] को भेजने के लिए, या मैं इसे स्ट्रीम करने के लिए एक सॉकेट खोल सकता हूं, लेकिन किसी भी मामले में मुझे नहीं पता कि ब्राउज़र में बाइट [] को कौन खेलना है?

Answer 1

मुझे लगता है आप के साथ इस लक्ष्य को हासिल कर सकते हैं एचटीएमएल 5 ऑडियो API आसानी से पर्याप्त:

https://developer.mozilla.org/en/Introducing_the_Audio_API_Extension

इस पुस्तकालय काम में भी आ सकता है, हालांकि मुझे यकीन है कि नहीं कर रहा हूँ अगर यह नवीनतम ब्राउज़र व्यवहार को दर्शाता है:

https://github.com/jussi-kalliokoski/audiolib.js

Answer 2

निम्नलिखित कोड साइन लहर 0.5 और 2.0 पर चलाएगा। अपने बटन या कहीं भी चाहें फंक्शन play_buffersource() पर कॉल करें।

वेब ऑडियो ध्वज सक्षम के साथ क्रोम का उपयोग करके परीक्षण किया गया। आपके मामले के लिए, आपको बस इतना करना है कि आप अपने ऑडियो बाइट्स को buf पर घुमाएं।

<script type="text/javascript"> 
const kSampleRate = 44100; // Other sample rates might not work depending on the your browser's AudioContext 
const kNumSamples = 16834; 
const kAmplitute = 440; 
const kPI_2  = Math.PI * 2; 

function play_buffersource() { 
    if (!window.AudioContext) { 
     if (!window.webkitAudioContext) { 
      alert("Your browser sucks because it does NOT support any AudioContext!"); 
      return; 
     } 
     window.AudioContext = window.webkitAudioContext; 
    } 

    var ctx = new AudioContext(); 

    var buffer = ctx.createBuffer(1, kNumSamples, kSampleRate); 
    var buf = buffer.getChannelData(0); 
    for (i = 0; i < kNumSamples; ++i) { 
     buf[i] = Math.sin(kAmplitute * kPI_2 * i/kSampleRate); 
    } 

    var node = ctx.createBufferSource(0); 
    node.buffer = buffer; 
    node.connect(ctx.destination); 
    node.noteOn(ctx.currentTime + 0.5); 

    node = ctx.createBufferSource(0); 
    node.buffer = buffer; 
    node.connect(ctx.destination); 
    node.noteOn(ctx.currentTime + 2.0); 
} 
</script> 

संदर्भ:

• http://epx.com.br/artigos/audioapi.php
• https://dvcs.w3.org/hg/audio/raw-file/tip/webaudio/specification.html

आप ऑडियो resample करने की जरूरत है, तो आप एक जावास्क्रिप्ट रीसैंपलर उपयोग कर सकते हैं: https://github.com/grantgalitz/XAudioJS

आप के लिए की जरूरत है बेस 64 डेटा डीकोड करें, बहुत कुछ है जावास्क्रिप्ट बेस 64 डीकोडर का: https://github.com/carlo/jquery-base64

Answer 3

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

Answer 4

मैंने इसे निम्नलिखित कोड के माध्यम से पूरा किया। मैं एक बाइट सरणी में जाता हूं जिसमें WAV फ़ाइल से डेटा को फ़ंक्शन प्लेबेटएरे में शामिल किया जाता है। मेरा समाधान पीटर ली के समान है, लेकिन मैं उसे अपने मामले में काम नहीं कर सका (आउटपुट खराब हो गया था) जबकि यह समाधान मेरे लिए अच्छा काम करता है। मैंने सत्यापित किया कि यह फ़ायरफ़ॉक्स और क्रोम में काम करता है।

window.onload = init; 
var context; // Audio context 
var buf;  // Audio buffer 

function init() { 
    if (!window.AudioContext) { 
    if (!window.webkitAudioContext) { 
     alert("Your browser does not support any AudioContext and cannot play back this audio."); 
     return; 
    } 
     window.AudioContext = window.webkitAudioContext; 
    } 

    context = new AudioContext(); 
} 

function playByteArray(byteArray) { 

    var arrayBuffer = new ArrayBuffer(byteArray.length); 
    var bufferView = new Uint8Array(arrayBuffer); 
    for (i = 0; i < byteArray.length; i++) { 
     bufferView[i] = byteArray[i]; 
    } 

    context.decodeAudioData(arrayBuffer, function(buffer) { 
     buf = buffer; 
     play(); 
    }); 
} 

// Play the loaded file 
function play() { 
    // Create a source node from the buffer 
    var source = context.createBufferSource(); 
    source.buffer = buf; 
    // Connect to the final output node (the speakers) 
    source.connect(context.destination); 
    // Play immediately 
    source.start(0); 
}