GALAXY TECH
Chuyên gia Công nghệ
Thứ ba, 21/05/2019 | 00:00 GMT+7

Thêm Sound FX vào ứng dụng React của bạn

Trong bài viết này, hãy tìm hiểu cách kết hợp hiệu ứng âm thanh trong các ứng dụng React của bạn bằng cách sử dụng một thư viện nhỏ có tên uifx .

Hiệu ứng âm thanh không được sử dụng thường xuyên cho các ứng dụng. Bạn thường chỉ thấy chúng trên các ứng dụng của Big Tech như:

  • Bàn phím iOS phát ra tiếng gõ gỗ
  • Ứng dụng Twitter iOS phát ra tiếng "boop" khi bạn kéo để làm mới
  • “Hey Google” và “Hey Siri” có âm ghi nhớ đặc biệt khi bạn gọi tên của họ

Tôi nghĩ rằng ta đã quá quen với những “tiếng ồn” này đến nỗi chúng thậm chí không còn được coi là những tính năng thú vị nữa. Nhưng chúng! Hãy tưởng tượng nếu Apple đột nhiên quyết định loại bỏ âm thanh "tích tắc" khỏi bàn phím của họ. Đối với những người đã quen với tiếng ồn quen thuộc đó, có lẽ ta sẽ cảm thấy một sự thiếu hụt âm thanh kỳ lạ nào đó. Tuy nhiên, đối với các ứng dụng web, ta hầu như không bao giờ thấy các hiệu ứng âm thanh (sfx) được tích hợp trong giao diện user và thành thật mà nói… ta gần như không mong đợi chúng ở đó.

Ứng dụng iOS / Android không phải là phương tiện kỹ thuật số duy nhất có thể thể hiện bản thân bằng âm thanh. Web có thể… và nên sử dụng hiệu ứng âm thanh nhiều hơn!

Giới thiệu UIfx

Tôi nhận ra rằng có rất nhiều thư viện âm thanh chính thức như SoundManager hoặc Howler , nhưng không có thư viện nào được thiết kế cho các hiệu ứng âm thanh giao diện user yêu cầu chiến lược cháy và quên để chơi các đoạn âm thanh nhỏ ... vì vậy tôi đã tạo một thư viện đơn giản cái này được gọi là uifx :

import UIfx from 'uifx';
import mp3File from './my-sounds/beep.mp3';

const beep = new UIFx({asset: mp3File});

<button onClick={beep.play}>Signup</button>

React được sử dụng ở đây nhưng bạn có thể sử dụng nó trong bất kỳ môi trường JavaScript nào có API Audio –– đây là những trình duyệt hiện đại nhất!

Cách sử dụng cơ bản

Đây là một ví dụ thực tế trong đó âm thanh fx được sử dụng để cung cấp phản hồi âm thanh trên phần tử <input type="range"/> .

import React, { Component } from 'react';
import UIfx from 'uifx'; 
import tickAudio from './my-sounds/tick.mp3';

const tick = new UIfx({asset: tickAudio});

export default class InputRange extends Component {
  state = {
    value: 0,
  }
  onChange = (event) => {
    this.setState({ value: event.target.value });
    tick.play();
  }
  render() {
    return (
      <div>
        <div>{this.state.value}</div>
        <input
          type="range"
          value={this.state.value}
          onChange={this.onChange}
        />
      </div>
    )
  }
}

Bạn không hình dung được công cụ của thợ đồng hồ hay cái gì đó sao? Điều đó thật thú vị làm sao ?! Âm thanh thêm một trải nghiệm cảm giác hoàn toàn mới!

Phát lại Throttling

UIfx được thiết kế đặc biệt để phát các file âm thanh nhỏ liên tiếp nhanh chóng. Tuy nhiên, đôi khi bạn cần giảm tốc độ phát lại một chút để âm thanh không quá điên rồ hoặc làm quá tải loa của user :

const tick = new UIfx({
  asset: tickAudio,
  throttleMs: 40
})

Tìm kiếm sự cân bằng phù hợp của phản hồi trong thời gian thực là một nghệ thuật hơn là một khoa học. Tôi thường cố gắng đặt mình vào vị trí của user và tự hỏi mình muốn có bao nhiêu phản hồi âm thanh tức thì và điều chỉnh cho phù hợp.

Thay đổi âm lượng phát lại

Theo mặc định, âm thanh sẽ phát ở âm lượng đầy đủ. Để thay đổi âm lượng của âm thanh UIfx , hãy gọi phương thức UIfx.setVolume() :

beep.setVolume(0.8).play();

// or...

beep.setVolume(0.8);
beep.play();

Các đối số hợp lệ là 0.0 → 1.0 để mô phỏng api Audio . Trong bản trình diễn bên dưới, âm lượng được thay đổi bằng cách sử dụng thanh trượt <input type="range"> :

class ToastNotifications extends Component {
  state = {
    isToastVisible: false,
    volume: 0.5,
  }
  sfx = {
    beep: new UIfx({asset: beepAudio}),
    tick: new UIfx({asset: tickAudio, throttleMs: 100}),
    appear: new UIfx({asset: appearAudio}),
    disappear: new UIfx({asset: disappearAudio})
  }
  onVolumeChange = (event) => {
    this.setState(
      { volume: event.target.value },
      // "setState" cb to get updated volume 👇
      () => this.sfx.tick.setVolume(this.state.volume).play()
    )
  }
  toggleToast = () => {
    this.setState(
      { isToastVisible: !this.state.isToastVisible },
      () => {
        this.state.isToastVisible  // 👈 decide which sfx to play
          ? this.sfx.appear.setVolume(this.state.volume).play()   
          : this.sfx.disappear.setVolume(this.state.volume).play()
      }
    )
  }
  render() {
    return (
      <div>

        <button onClick={this.toggleToast}>
          Toggle notification
        </button>

        <div>
          Volume: {this.state.volume}
        </div>
        <input
          value={this.state.volume}
          onChange={this.onVolumeChange}
          min="0.0"
          max="1.0"
          step="0.01"
          type="range"
        />

        <Toast isVisible={this.state.isToastVisible}/>

      </div>
    )
  }
}

Nếu bạn không muốn tiếp tục thay đổi âm lượng, bạn có thể dễ dàng phát ở một âm lượng khác bằng cách chuyển đối số tới UIfx.play() :

const tick = new UIfx({
  asset: tickMp3,
  volume: 1.0
});

tick.play(0.25); // plays at 0.25 volume
tick.play(); // plays at 1.0 volume

Kết luận

Hiệu ứng âm thanh trong ứng dụng web là một domain tương đối chưa được khám phá. Tôi hy vọng rằng uifx sẽ giúp bạn xây dựng các ứng dụng thu hút mọi người một cách đầy đủ hơn –– cả hình ảnh và âm thanh. Những nét chấm phá nhỏ như thế này có thể chạm đến trái tim của mọi người và cung cấp nhiều trải nghiệm phong phú hơn cho user của bạn.

📦 Kiểm tra [uifx](https://github.com/wle8300/uifx) ! Tôi muốn biết bạn nghĩ gì!

Tags:

Các tin liên quan