如何在 Web 前端做 3D 音效處理

{"type":"doc","content":[{"type":"heading","attrs":{"align":null,"level":1},"content":[{"type":"text","marks":[{"type":"color","attrs":{"color":"#40A9FF","name":"blue"}}],"text":"一、背景","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"在社交元宇宙、大逃殺等類型的遊戲場景下，用戶在通過簡單語音交流外，結合場景也需要一些立體聲效果來讓用戶感知遊戲角色周圍其他用戶的存在及其對應的距離和方位，提高語音互動的趣味性。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"爲了滿足上述需求 ZEGO Express Web SDK 從  v2.10.0（Native 爲 v2.11.0）開始加入範圍語音功能模塊，爲遊戲提供語音服務。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"當前範圍語音功能模塊主要包括如下功能：","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"bulletedlist","content":[{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"範圍語音：房間內的收聽者對音頻的接收距離有範圍限制，若發聲者與自己的距離超過該範圍，則無法聽到聲音。","attrs":{}}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"3D 音效：聽者接收的聲音根據發聲者相對於聽者的距離和方位模擬現實中聲音的立體聲效果。","attrs":{}}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"小隊語音：玩家可以選擇加入小隊，並支持在房間內自由切換“全世界”模式和“僅小隊”模式。","attrs":{}}]}]}],"attrs":{}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"其中對於 Web 3D 音效這部分功能的實現，我們是基於瀏覽器提供的 Web Audio API 對音頻進行處理。這裏小編也通過使用 ****Web Audio API ****做了一個簡單的環繞音的 demo 頁面。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/f8/f81dc3f8590e7a2a54824429faef3484.png","alt":null,"title":"","style":[{"key":"width","value":"100%"},{"key":"bordertype","value":"none"}],"href":"","fromPaste":false,"pastePass":false}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"demo 在線體驗地址：","attrs":{}},{"type":"link","attrs":{"href":"https://keen_wang.gitee.io/demo/music3d","title":"","type":null},"content":[{"type":"text","text":"https://keen_wang.gitee.io/demo/music3d","attrs":{}}]},{"type":"text","text":"，頁面如下圖，點擊“開始播放”按鈕開始播放音樂，再點擊“開閉空間化”進行開啓或關閉 3D 音效，打開 3D 音效後就可以聽到空間環繞聲效果。（在體驗 3D 音效時需要使用左右聲道分開的耳機或音響設備）","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"下文將介紹如何使用 ****Web Audio API ****來做這個環繞音 demo。","attrs":{}}]},{"type":"heading","attrs":{"align":null,"level":1},"content":[{"type":"text","marks":[{"type":"color","attrs":{"color":"#40A9FF","name":"blue"}}],"text":"二、Web Audio API 簡介","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"Web Audio API 用於操作聲音，很多時候用於替代