AudioContext ใช้การแสดงภาพเสียง

เพื่อให้บรรลุการแสดงภาพเสียงและบรรลุเอฟเฟกต์เจ๋งๆ คุณต้องใช้วิธีการบางอย่าง AudioContext ที่ Web Audio API มอบให้:

อินเทอร์เฟซ AudioContext แสดงถึงกราฟการประมวลผลเสียงที่สร้างขึ้นจากโมดูลเสียงที่เชื่อมโยงเข้าด้วยกัน โดยแต่ละโมดูลจะแสดงโดย AudioNode บริบทของเสียงจะควบคุมการสร้างโหนดที่มีอยู่และการดำเนินการประมวลผลหรือถอดรหัสเสียง ก่อนที่จะดำเนินการใดๆ คุณต้องสร้างออบเจ็กต์ AudioContext เนื่องจากทุกอย่างเกิดขึ้นภายในบริบท ขอแนะนำให้สร้างออบเจ็กต์ AudioContext และนำมาใช้ใหม่ แทนที่จะเริ่มต้นออบเจ็กต์ AudioContext ใหม่ทุกครั้ง และใช้ออบเจ็กต์ AudioContext สำหรับแหล่งเสียงและไปป์ต่างๆ หลายๆ แหล่งพร้อมกัน

1. เตรียมแท็กเสียงและแคนวาส

 <audio class="audio" ref='audio' :src='tune' @ended='ended'></audio>

<canvas ref='canvas' width='300px' height='300px'></canvas>

2. สร้างและส่งคืนวัตถุ AudioContext ใหม่

 const ctx = AudioContext ใหม่ ();

3. สร้างวัตถุ MediaElementAudioSourceNode ใหม่

เมธอด createMediaElementSource() ของอินเทอร์เฟซ AudioContext ใช้เพื่อสร้างออบเจ็กต์ MediaElementAudioSourceNode ใหม่ ป้อนองค์ประกอบ HTML<audio>หรือ<video>` ที่มีอยู่ และเสียงที่เกี่ยวข้องสามารถเล่นหรือแก้ไขได้

 const audioSrc = ctx.createMediaElementSource(this.audioElement);

4. สร้างวัตถุ AnalyserNode

เมธอด createAnalyser() ของ AudioContext สามารถสร้าง AnalyserNode ซึ่งสามารถใช้เพื่อรับข้อมูลเวลาและความถี่ของเสียง และใช้การแสดงภาพข้อมูล

 ตัววิเคราะห์ const = ctx.createAnalyser();

5. ตั้งค่าแอตทริบิวต์ fftSize

ค่าของแอตทริบิวต์ fftSize ของอินเทอร์เฟซ AnalyserNode เป็นค่าจำนวนเต็มยาวที่ไม่ได้ลงนาม ซึ่งแสดงถึงขนาดหน้าต่างของตัวอย่าง (สัญญาณ) ตัวอย่าง (สัญญาณ) เหล่านี้ใช้เพื่อรับข้อมูลโดเมนความถี่เมื่อดำเนินการแปลงฟูเรียร์แบบเร็ว (FFT) ค่าของแอตทริบิวต์ fftSize ต้องเป็นกำลังที่ไม่เป็นศูนย์ของ 2 ในช่วงตั้งแต่ 32 ถึง 32768 โดยค่าเริ่มต้นคือ 2048

 analyser.fftSize = 512;

6. เชื่อมโยง audioSrc และเครื่องวิเคราะห์

วิธี connect() ของอินเทอร์เฟซ AudioNode ช่วยให้คุณสามารถเชื่อมต่อเอาต์พุตของโหนดไปยังเป้าหมายที่ระบุได้ เป้าหมายที่ระบุนี้อาจเป็น AudioNode อื่น (ซึ่งจะนำข้อมูลเสียงไปยังโหนดที่ระบุถัดไป) หรือ AudioParam เพื่อให้โหนดก่อนหน้า ข้อมูลเอาต์พุตสามารถเปลี่ยนค่าพารามิเตอร์ถัดไปโดยอัตโนมัติเมื่อเวลาผ่านไป

 audioSrc.connect (วิเคราะห์);

7. ตัววิเคราะห์ลิงก์และ ctx.destination

คุณสมบัติ destination ของ AudioContext ส่งคืน AudioDestinationNode ที่แสดงถึงโหนดปลายทางสุดท้ายของเสียง (โหนด) ทั้งหมดใน context ซึ่งโดยทั่วไปคืออุปกรณ์แสดงผลเสียง เช่น ลำโพง

 ตัววิเคราะห์เชื่อมต่อ (ctx.destination)

8. กำลังเล่นเพลงอยู่

ประเภทอาร์เรย์ Uint8Array แสดงถึงอาร์เรย์จำนวนเต็ม 8 บิตที่ไม่ได้ลงนาม และเนื้อหาจะเริ่มต้นเป็น 0 เมื่อสร้างขึ้น หลังจากสร้างแล้ว องค์ประกอบในอาร์เรย์สามารถอ้างอิงเป็นอ็อบเจ็กต์หรือใช้การจัดทำดัชนีตัวห้อยอาร์เรย์ได้

getByteFrequencyData() 方ของอินเทอร์เฟซ AnalyserNode จะคัดลอกข้อมูลความถี่ปัจจุบันไปยัง Uint8Array ขาเข้า (อาร์เรย์ไบต์ที่ไม่ได้ลงนาม)

หากความยาวของอาร์เรย์น้อยกว่า AnalyserNode.frequencyBinCount องค์ประกอบเพิ่มเติมของ Analyser จะถูกลบ หากมีความยาวมากกว่านั้น องค์ประกอบเพิ่มเติมของอาร์เรย์จะถูกละเว้น

 การสร้างภาพ () {

const arr = Uint8Array ใหม่ (this.analyser.frequencyBinCount);

this.analyser.getByteFrequencyData(arr);

นี้.วาด(arr);

-

9. ใช้ Canvas เพื่อวาดแผนที่เสียง

เมธอด HTMLCanvasElement.getContext() ส่งคืนบริบท canvas หรือเป็นโมฆะหากไม่ได้กำหนดบริบท 2d สร้างบริบทการเรนเดอร์สองมิติ CanvasRenderingContext2D

 this.canvas = this.$refs.canvas.getContext('2d');draw(arr) { canvas.clearRect(0, 0, document.body.clientWidth, this.canvasHeight); const start = ((document.body .clientWidth / 2) - ((arr.length / 2) * 3)); arr.forEach((รายการ, ดัชนี) => { this.canvas.beginPath(); this.canvas. strokeStyle = '#B2AFF4'; this.canvas.lineWidth = 3; this.canvas.moveTo(เริ่มต้น + (ดัชนี * 4), this.canvasHeight); lineTo(เริ่มต้น + (ดัชนี * 4), this.canvasHeight - item / 2); this.canvas. stroke( });}

การแสดงเอฟเฟกต์:

นี่เป็นการสรุปบทความเกี่ยวกับ AudioContext สำหรับการแสดงภาพเสียง (การแบ่งปันเทคโนโลยีเว็บ) สำหรับข้อมูลเพิ่มเติมเกี่ยวกับ AudioContext สำหรับการแสดงภาพเสียง โปรดค้นหาบทความก่อนหน้าใน downcodes.com หรืออ่านบทความที่เกี่ยวข้องด้านล่างต่อไป ฉันหวังว่าคุณจะอ่านเพิ่มเติมในอนาคต . สนับสนุน downcodes.com!