Untuk mencapai visualisasi audio dan mendapatkan beberapa efek keren, Anda perlu menggunakan beberapa metode AudioContext yang disediakan oleh Web Audio API:
Antarmuka AudioContext mewakili grafik pemrosesan audio yang dibuat dari modul audio yang dihubungkan bersama, setiap modul diwakili oleh AudioNode . Konteks audio mengontrol pembuatan node yang dikandungnya dan pelaksanaan pemrosesan atau penguraian audio. Sebelum melakukan hal lain, Anda perlu membuat objek AudioContext karena semuanya terjadi dalam konteks. Disarankan untuk membuat objek AudioContext dan menggunakannya kembali, daripada menginisialisasi objek AudioContext baru setiap kali, dan menggunakan satu objek AudioContext untuk beberapa sumber audio dan pipa yang berbeda secara bersamaan.
<audio class="audio" ref='audio' :src='tune' @ended='ended'></audio> <kanvas ref='kanvas' lebar='300px' tinggi='300px'></kanvas>
const ctx = AudioContext baru();
Metode createMediaElementSource() antarmuka AudioContext digunakan untuk membuat objek MediaElementAudioSourceNode baru, memasukkan elemen HTML<audio>atau<video>` yang ada, dan audio yang sesuai dapat diputar atau dimodifikasi.
const audioSrc = ctx.createMediaElementSource(ini.audioElement);
Metode createAnalyser() AudioContext dapat membuat AnalyserNode , yang dapat digunakan untuk memperoleh data waktu dan frekuensi audio serta mengimplementasikan visualisasi data.
const analisa = ctx.createAnalyser();
Nilai atribut fftSize antarmuka AnalyserNode adalah nilai bilangan bulat panjang yang tidak ditandatangani, yang mewakili ukuran jendela sampel (sinyal). Sampel (sinyal) ini digunakan untuk memperoleh data domain frekuensi saat melakukan Fast Fourier Transform (FFT). Nilai atribut fftSize harus berupa pangkat 2 bukan nol dalam rentang 32 hingga 32768; nilai defaultnya adalah 2048.
penganalisis.fftSize = 512;
Metode connect() dari antarmuka AudioNode memungkinkan Anda untuk menghubungkan output dari sebuah node ke target yang ditentukan. Target yang ditentukan ini dapat berupa AudioNode lain (sehingga mengarahkan data audio ke node yang ditentukan berikutnya) atau AudioParam sehingga node sebelumnya Data keluaran dapat secara otomatis mengubah nilai parameter berikutnya seiring berjalannya waktu.
audioSrc.connect(penganalisa);
Properti destination AudioContext mengembalikan AudioDestinationNode yang mewakili node tujuan akhir dari semua audio (node) dalam context , yang umumnya merupakan perangkat rendering audio, seperti speaker.
penganalisis.connect(ctx.destinasi)
Tipe array Uint8Array mewakili array integer 8-bit yang tidak ditandatangani, dan kontennya diinisialisasi ke 0 saat dibuat. Setelah pembuatan, elemen dalam array dapat direferensikan sebagai objek atau menggunakan pengindeksan subskrip array.
getByteFrequencyData() 方pada antarmuka AnalyserNode menyalin data frekuensi saat ini ke Uint8Array yang masuk (array byte yang tidak ditandatangani).
Jika panjang array kurang dari AnalyserNode.frequencyBinCount , maka elemen tambahan dari Analyser akan dihapus. Jika lebih besar, maka elemen tambahan dari array akan diabaikan.
visualisasi() {
const arr = Uint8Array baru(ini.analyser.frekuensiBinCount);
this.analyser.getByteFrequencyData(arr);
ini.draw(arr);
}, Metode HTMLCanvasElement.getContext() mengembalikan konteks canvas , atau null jika konteksnya tidak ditentukan. Membuat konteks rendering dua dimensi CanvasRenderingContext2D.
this.canvas = this.$refs.canvas.getContext('2d');draw(arr) { canvas.clearRect(0, 0, document.body.clientWidth, this.canvasHeight); .clientWidth / 2) - ((arr.length / 2) * 3)); arr.forEach((item, indeks) => { this.canvas.beginPath(); this.canvas.strokeStyle = '#B2AFF4'; this.canvas.lineWidth = 3; this.canvas.moveTo(mulai + (indeks * 4), this.canvasHeight); lineTo(mulai + (indeks * 4), this.canvasHeight - item / 2); this.canvas.stroke();Tampilan efek:
Demikianlah artikel tentang AudioContext untuk visualisasi audio (berbagi teknologi web) ini. Untuk informasi lebih lanjut tentang AudioContext untuk visualisasi audio, silakan cari artikel sebelumnya di downcodes.com atau lanjutkan menelusuri artikel terkait di bawah ini .Dukung downcodes.com!