كيف تكتب مرئيًا للموسيقى على الويب؟

Question

أحاول العثور على أفضل نهج لبناء مصور موسيقى لتشغيله في متصفح عبر الويب. الوحدة هي خيار ، لكنني سأحتاج إلى إنشاء مكون إضافي للاستيراد/التحليل الصوتي المخصص للحصول على إخراج صوت المستخدم النهائي. الكوارتز يفعل ما أحتاجه ولكن يركض فقط على Mac/Safari. يبدو ويب Gl جاهزًا. رافائيل هو بشكل أساسي ثنائي الأبعاد ، وما زالت هناك مشكلة في الحصول على صوت المستخدم ... أي أفكار؟ هل فعل أي شخص هذا من قبل؟

Answer 1

من خلال WebGL كونها "غير جاهزة" ، أفترض أنك تشير إلى الاختراق (يتم دعمه فقط في WebKit و Firefox في الوقت الحالي).

بخلاف ذلك ، من المؤكد أن المعادلات ممكنة باستخدام HTML5 Audio و WebGL. رجل يدعى ديفيد همفري لديه تم التدوين حول صنع مرئيات الموسيقى المختلفة باستخدام WebGL وتمكنت من إنشاء بعضها مثير للإعجاب حقًا. إليك بعض مقاطع الفيديو الخاصة بالمرور (انقر لمشاهدة):

Answer 2

صنع شيء ما هو رد الفعل أمر بسيط للغاية. إليك موقع مفتوح المصدر به الكثير من الأمثلة التفاعلية الصوتية.

أما بالنسبة لكيفية القيام بذلك ، فأنت تستخدم بشكل أساسي واجهة برمجة تطبيقات Web Audio لدفق الموسيقى واستخدام analysernode للحصول على بيانات الصوت.

"use strict";
const ctx = document.querySelector("canvas").getContext("2d");

ctx.fillText("click to start", 100, 75);
ctx.canvas.addEventListener('click', start);  

function start() {
  ctx.canvas.removeEventListener('click', start);
  // make a Web Audio Context
  const context = new AudioContext();
  const analyser = context.createAnalyser();

  // Make a buffer to receive the audio data
  const numPoints = analyser.frequencyBinCount;
  const audioDataArray = new Uint8Array(numPoints);

  function render() {
    ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);

    // get the current audio data
    analyser.getByteFrequencyData(audioDataArray);

    const width = ctx.canvas.width;
    const height = ctx.canvas.height;
    const size = 5;

    // draw a point every size pixels
    for (let x = 0; x < width; x += size) {
      // compute the audio data for this point
      const ndx = x * numPoints / width | 0;
      // get the audio data and make it go from 0 to 1
      const audioValue = audioDataArray[ndx] / 255;
      // draw a rect size by size big
      const y = audioValue * height;
      ctx.fillRect(x, y, size, size);
    }
    requestAnimationFrame(render);
  }
  requestAnimationFrame(render);

  // Make a audio node
  const audio = new Audio();
  audio.loop = true;
  audio.autoplay = true;

  // this line is only needed if the music you are trying to play is on a
  // different server than the page trying to play it.
  // It asks the server for permission to use the music. If the server says "no"
  // then you will not be able to play the music
  // Note if you are using music from the same domain 
  // **YOU MUST REMOVE THIS LINE** or your server must give permission.
  audio.crossOrigin = "anonymous";

  // call `handleCanplay` when it music can be played
  audio.addEventListener('canplay', handleCanplay);
  audio.src = "https://twgljs.org/examples/sounds/DOCTOR%20VOX%20-%20Level%20Up.mp3";
  audio.load();


  function handleCanplay() {
    // connect the audio element to the analyser node and the analyser node
    // to the main Web Audio context
    const source = context.createMediaElementSource(audio);
    source.connect(analyser);
    analyser.connect(context.destination);
  }
}

canvas { border: 1px solid black; display: block; }

<canvas></canvas>

ثم الأمر متروك لك لرسم شيء مبدع.

لاحظ بعض المشاكل التي من المحتمل أن تصادفها.

1. في هذه المرحلة الزمنية (2017/1/3) ، لا تدعم Android Chrome أو IOS Safari تحليل بيانات صوتية دفق. بدلا من ذلك عليك تحميل الأغنية بأكملها. هنا مكتبة تحاول تجريد ذلك قليلا

2. على الجوال لا يمكنك تشغيل الصوت تلقائيًا. يجب أن تبدأ الصوت داخل حدث إدخال بناءً على إدخال المستخدم مثل 'click' أو 'touchstart'.

3. كما هو موضح في العينة ، يمكنك فقط تحليل الصوت إذا كان المصدر إما من نفس المجال أو تطلب إذنًا من CORS ويعطي الخادم الإذن. Afaik SoundCloud فقط يعطي الإذن وهو على أساس كل أغنية. الأمر متروك لإعدادات أغنية الفنان الفردية سواء كان تحليل الصوت مسموحًا بأغنية معينة أم لا.

   لمحاولة شرح هذا الجزء

   الافتراضي هو أن لديك إذن للوصول إلى جميع البيانات من نفس المجال ولكن لا يوجد إذن من المجالات الأخرى.

   عندما تضيف

   audio.crossOrigin = "anonymous";
   

   هذا يقول أساسا "اطلب من الخادم إذنًا للمستخدم" مجهول الكشف عن هويته ". يمكن أن يعطي الخادم الإذن أم لا. الأمر متروك للخادم. يتضمن ذلك سؤال حتى الخادم على نفس المجال مما يعني أنه إذا كنت ستطلب أغنية على نفس المجال الذي تحتاجه إما (أ) إزالة السطر أعلاه أو (ب) تكوين الخادم الخاص بك لإعطاء CORS إذن. لا تمنح معظم الخوادم افتراضيًا إذنًا من CORS ، لذا إذا قمت بإضافة هذا السطر ، حتى لو كان الخادم هو نفس المجال ، إذا لم يمنح CORS إذنًا ، فإن محاولة تحليل الصوت ستفشل.

---

موسيقى: دكتور فوكس - مستوى أعلى

Answer 3

لقد استخدمت SoundManager2 لسحب بيانات الموجة من ملف MP3. تتطلب هذه الميزة Flash 9 لذلك قد لا تكون أفضل طريقة.

تجريبي الموجي مع قماش HMTL5:http://www.momentumracer.com/electriccanvas/

و WebGL:http://www.momentumracer.com/electricwebgl/

مصادر:https://github.com/pepez/electric-canvas

Answer 4

اعتمادًا على التعقيد ، قد تكون مهتمًا بتجربة المعالجة (http://www.processing.org) ، ولديه أدوات سهلة حقًا لإنشاء تطبيقات على الويب ، ولديها أدوات للحصول على FFT و Form من ملف الصوت.