整合營銷服務商

          電腦端+手機端+微信端=數據同步管理

          免費咨詢熱線:

          HTML 音頻(Audio)

          音在HTML中可以以不同的方式播放.

          問題以及解決方法

          在 HTML 中播放音頻并不容易!

          您需要諳熟大量技巧,以確保您的音頻文件在所有瀏覽器中(Internet Explorer, Chrome, Firefox, Safari, Opera)和所有硬件上(PC, Mac , iPad, iPhone)都能夠播放。

          在這W3CSchool 為您總結了問題和解決方法。

          使用插件

          瀏覽器插件是一種擴展瀏覽器標準功能的小型計算機程序。

          插件可以使用 <object> 標簽 或者 <embed> 標簽添加在頁面上.

          這些標簽定義資源(通常非 HTML 資源)的容器,根據類型,它們即會由瀏覽器顯示,也會由外部插件顯示。

          使用 <embed> 元素

          <embed>標簽定義外部(非 HTML)內容的容器。(這是一個 HTML5 標簽,在 HTML4 中是非法的,但是所有瀏覽器中都有效)。

          下面的代碼片段能夠顯示嵌入網頁中的 MP3 文件:

          實例

          <embed height="50" width="100" src="horse.mp3">

          問題:

          • <embed> 標簽在 HTML 4 中是無效的。頁面無法通過 HTML 4 驗證。

          • 不同的瀏覽器對音頻格式的支持也不同。

          • 如果瀏覽器不支持該文件格式,沒有插件的話就無法播放該音頻。

          • 如果用戶的計算機未安裝插件,無法播放音頻。

          • 如果把該文件轉換為其他格式,仍然無法在所有瀏覽器中播放。

          使用 <object> 元素

          <object tag> 標簽也可以定義外部(非 HTML)內容的容器。

          下面的代碼片段能夠顯示嵌入網頁中的 MP3 文件:

          實例

          <object height="50" width="100" data="horse.mp3"></object>

          問題:

          • 不同的瀏覽器對音頻格式的支持也不同。

          • 如果瀏覽器不支持該文件格式,沒有插件的話就無法播放該音頻。

          • 如果用戶的計算機未安裝插件,無法播放音頻。

          • 如果把該文件轉換為其他格式,仍然無法在所有瀏覽器中播放。

          使用 HTML5 <audio> 元素

          HTML5 <audio> 元素是一個 HTML5 元素,在 HTML 4 中是非法的,但在所有瀏覽器中都有效。

          The <audio> element works in all modern browsers.

          以下我們將使用 <audio> 標簽來描述 MP3 文件(Internet Explorer、Chrome 以及 Safari 中是有效的), 同樣添加了一個 OGG 類型文件(Firefox 和 Opera瀏覽器中有效).如果失敗,它會顯示一個錯誤文本信息:

          實例

          <audio controls>

          <source src="horse.mp3" type="audio/mpeg">

          <source src="horse.ogg" type="audio/ogg">

          Your browser does not support this audio format.

          </audio>

          問題:

          • <audio> 標簽在 HTML 4 中是無效的。您的頁面無法通過 HTML 4 驗證。

          • 您必須把音頻文件轉換為不同的格式。

          • <audio> 元素在老式瀏覽器中不起作用。

          最好的 HTML 解決方法

          下面的例子使用了兩個不同的音頻格式。HTML5 <audio> 元素會嘗試以 mp3 或 ogg 來播放音頻。如果失敗,代碼將回退嘗試 <embed> 元素。

          實例

          <audio controls height="100" width="100">

          <source src="horse.mp3" type="audio/mpeg">

          <source src="horse.ogg" type="audio/ogg">

          <embed height="50" width="100" src="horse.mp3">

          </audio>

          問題:

          • 您必須把音頻轉換為不同的格式。

          • <embed> 元素無法回退來顯示錯誤消息。

          雅虎媒體播放器 - 一個簡單的添加音頻到你網站上的方式

          使用雅虎播放器是免費的。如需使用它,您需要把這段 JavaScript 插入網頁底部:

          雅虎播放器可以播放MP3以及其他各種格式。你只需添加一行代碼到你的頁面或 博客中就可以輕松地將您的HTML頁面制作成 專業的播放列表:

          實例

          <a href="horse.mp3">Play Sound</a>

          <script src="http://mediaplayer.yahoo.com/latest"></script>

          如果你要使用它,您需要把這段 JavaScript 插入網頁底部:

          <script src="http://mediaplayer.yahoo.com/latest"></script>

          然后只需簡單地把 MP3 文件鏈接到您的 HTML 中,JavaScript 會自動地為每首歌創建播放按鈕:

          <a href="song1.mp3">Play Song 1</a>

          <a href="song2.wav">Play Song 2</a>

          ...

          ...

          雅虎媒體播放器為您的用戶提供的是一個小型的播放按鈕,而不是完整的播放器。不過,當您點擊該按鈕,會彈出完整的播放器。

          請注意,這個播放器始終停靠在窗框底部。只需點擊它,就可將其滑出。

          使用超鏈接

          如果網頁包含指向媒體文件的超鏈接,大多數瀏覽器會使用"輔助應用程序"來播放文件。

          以下代碼片段顯示指向 mp3 文件的鏈接。如果用戶點擊該鏈接,瀏覽器會啟動"輔助應用程序"來播放該文件:

          實例

          <a href="horse.mp3">Play the sound</a>

          內聯的聲音說明

          當您在網頁中包含聲音,或者作為網頁的組成部分時,它被稱為內聯聲音。

          如果您打算在 web 應用程序中使用內聯聲音,您需要意識到很多人都覺得內聯聲音令人惱火。同時請注意,用戶可能已經關閉了瀏覽器中的內聯聲音選項。

          我們最好的建議是只在用戶希望聽到內聯聲音的地方包含它們。一個正面的例子是,在用戶需要聽到錄音并點擊某個鏈接時,會打開頁面然后播放錄音。

          HTML 多媒體標簽

          New : HTML5 新標簽

          標簽描述
          <embed>定義內嵌對象。HTML4 中不贊成,HTML5 中允許。
          <object>定義內嵌對象。
          <param>定義對象的參數。
          <audio>New定義了聲音內容
          <video>New定義一個視頻或者影片
          <source>New定義了media元素的多媒體資源(<video> 和 <audio>)
          <track>New規定media元素的字幕文件或其他包含文本的文件 (<video> 和<audio>)

          如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039,我們一起飛!

          TML5 提供了播放音頻文件的標準。

          互聯網上的音頻

          直到現在,仍然不存在一項旨在網頁上播放音頻的標準。

          今天,大多數音頻是通過插件(比如 Flash)來播放的。然而,并非所有瀏覽器都擁有同樣的插件。

          HTML5 規定了在網頁上嵌入音頻元素的標準,即使用 <audio> 元素。

          瀏覽器支持

          Internet Explorer 9+, Firefox, Opera, Chrome, 和 Safari 都支持 <audio> 元素.

          注意: Internet Explorer 8 及更早IE版本不支持 <audio> 元素.

          HTML5 Audio - 如何工作

          如需在 HTML5 中播放音頻,你需要使用以下代碼:

          實例

          <audiocontrols><sourcesrc="horse.ogg"type="audio/ogg"><sourcesrc="horse.mp3"type="audio/mpeg">您的瀏覽器不支持 audio 元素。</audio>

          control 屬性供添加播放、暫停和音量控件。

          在<audio> 與 </audio> 之間你需要插入瀏覽器不支持的<audio>元素的提示文本 。

          <audio> 元素允許使用多個 <source> 元素. <source> 元素可以鏈接不同的音頻文件,瀏覽器將使用第一個支持的音頻文件

          音頻格式及瀏覽器支持

          目前, <audio>元素支持三種音頻格式文件: MP3, Wav, 和 Ogg:

          瀏覽器MP3WavOgg
          Internet Explorer 9+YESNONO
          Chrome 6+YESYESYES
          Firefox 3.6+YESYESYES
          Safari 5+YESYESNO
          Opera 10+YESYESYES

          音頻格式的MIME類型

          FormatMIME-type
          MP3audio/mpeg
          Oggaudio/ogg
          Wavaudio/wav

          HTML5 Audio 標簽

          標簽描述
          <audio>定義了聲音內容
          <source>規定了多媒體資源, 可以是多個,在 <video> 與 <audio>標簽中使用

          如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039,我們一起飛!

          家好,很高興又見面了,我是"高級前端?進階?",由我帶著大家一起關注前端前沿、深入前端底層技術,大家一起進步,也歡迎大家關注、點贊、收藏、轉發,您的支持是我不斷創作的動力。

          今天給大家帶來的主題是 standardized-audio-context,即 Web Audio API 的跨瀏覽器包裝器,旨在嚴格遵循相關標準。話不多說,直接進入正題!

          1.Web Audio API

          1.1 什么是 Web Audio API

          Web Audio API 提供了在 Web 上控制音頻的一個非常有效的通用系統,允許開發者自選音頻源,對音頻添加特效,使音頻可視化,添加空間效果(如平移)等等。

          總之,Web Audio API 使用戶可以在音頻上下文(AudioContext)中進行音頻操作,同時具有模塊化路由的特點。在音頻節點上操作基礎的音頻,連接在一起構成音頻路由圖。即使在單個上下文中也支持多源,盡管這些音頻源具有多種不同類型通道布局。這種模塊化設計提供了靈活創建動態效果的復合音頻的方法。

          一個簡單而典型的 Web Audio 流程如下:

          • 創建音頻上下文
          • 在音頻上下文里創建源 — 例如 <audio>, 振蕩器,流
          • 創建效果節點,例如:混響、雙二階濾波器、平移、壓縮
          • 為音頻選擇一個目的地,例如系統揚聲器
          • 連接源到效果器,對目的地進行效果輸出

          1.2 使用 Web Audio API

          下面的示例展示了諸多 Web Audio API 接口的使用,包括對聲音的音量進行改變。

          var audioCtx = new (window.AudioContext || window.webkitAudioContext)();
          // 定義音頻上下文
          // Webkit/blink 瀏覽器需要前綴,Safari 沒有 window 將無法工作
          var voiceSelect = document.getElementById("voice");
          //  用于選擇語音效果選項的選擇框
          var visualSelect = document.getElementById("visual");
          // 用于選擇音頻可視化選項的選擇框
          var mute = document.querySelector(".mute");
          // 靜音按鈕
          var drawVisual;
          // requestAnimationFrame
          var analyser = audioCtx.createAnalyser();
          // 創建一個AnalyserNode用來獲取音頻時間和頻率數據以實現數據可視化。
          var distortion = audioCtx.createWaveShaper();
          // 創建了表示非線性失真的WaveShaperNode,通常被用來給音頻添加失真效果
          var gainNode = audioCtx.createGain();
          // 創建一個 GainNode,可用于控制音頻圖的整體增益(或音量)
          var biquadFilter = audioCtx.createBiquadFilter();
          // 創建一個 BiquadFilterNode 表示一個二階濾波器,可配置為幾種不同的常見濾波器類型
          function makeDistortionCurve(amount) {
            // 為失真/波形整形器節點使用創建曲線形狀的函數
            var k = typeof amount === "number" ? amount : 50,
              n_samples = 44100,
              curve = new Float32Array(n_samples),
              deg = Math.PI / 180,
              i = 0,
              x;
            for (; i < n_samples; ++i) {
              x = (i * 2) / n_samples - 1;
              curve[i] = ((3 + k) * x * 20 * deg) / (Math.PI + k * Math.abs(x));
            }
            return curve;
          }
          navigator.getUserMedia(
            {
              // 限制 - 此應用程序僅需要音頻
              audio: true,
            },
            // 成功回調
            function (stream) {
              source = audioCtx.createMediaStreamSource(stream);
              source.connect(analyser);
              analyser.connect(distortion);
              distortion.connect(biquadFilter);
              biquadFilter.connect(gainNode);
              gainNode.connect(audioCtx.destination);
              // 將不同的音頻圖節點連接在一起
              visualize(stream);
              voiceChange();
            },
            // 錯誤回調
            function (err) {
              console.log("The following gUM error occured: " + err);
            }
          );
          function visualize(stream) {
            WIDTH = canvas.width;
            HEIGHT = canvas.height;
            var visualSetting = visualSelect.value;
            console.log(visualSetting);
            if (visualSetting == "sinewave") {
              analyser.fftSize = 2048;
              var bufferLength = analyser.frequencyBinCount;
              // FFT 值的一半
              var dataArray = new Uint8Array(bufferLength);
              // 創建一個數組來存儲數據
              canvasCtx.clearRect(0, 0, WIDTH, HEIGHT);
              function draw() {
                drawVisual = requestAnimationFrame(draw);
                analyser.getByteTimeDomainData(dataArray);
                // 獲取波形數據并將其放入上面創建的數組中
                canvasCtx.fillStyle = "rgb(200, 200, 200)";
                // 用畫布畫出波浪
                canvasCtx.fillRect(0, 0, WIDTH, HEIGHT);
                canvasCtx.lineWidth = 2;
                canvasCtx.strokeStyle = "rgb(0, 0, 0)";
                canvasCtx.beginPath();
                var sliceWidth = (WIDTH * 1.0) / bufferLength;
                var x = 0;
                for (var i = 0; i < bufferLength; i++) {
                  var v = dataArray[i] / 128.0;
                  var y = (v * HEIGHT) / 2;
                  if (i === 0) {
                    canvasCtx.moveTo(x, y);
                  } else {
                    canvasCtx.lineTo(x, y);
                  }
                  x += sliceWidth;
                }
                canvasCtx.lineTo(canvas.width, canvas.height / 2);
                canvasCtx.stroke();
              }
              draw();
            } else if (visualSetting == "off") {
              canvasCtx.clearRect(0, 0, WIDTH, HEIGHT);
              canvasCtx.fillStyle = "red";
              canvasCtx.fillRect(0, 0, WIDTH, HEIGHT);
            }
          }
          function voiceChange() {
            distortion.curve = new Float32Array();
            biquadFilter.gain.value = 0;
            // 每次使用 voiceChange 函數時都會重置效果
            var voiceSetting = voiceSelect.value;
            console.log(voiceSetting);
            if (voiceSetting == "distortion") {
              distortion.curve = makeDistortionCurve(400);
              // 使用波形成形器節點對聲音應用失真
            } else if (voiceSetting == "biquad") {
              biquadFilter.type = "lowshelf";
              biquadFilter.frequency.value = 1000;
              biquadFilter.gain.value = 25;
              // 使用雙二階將 Lowshelf 濾波器應用于聲音
            } else if (voiceSetting == "off") {
              console.log("Voice settings turned off");
              // 不執行任何操作,因為選擇了關閉選項
            }
          }
          // 用于更改可視化和語音設置的事件偵聽器
          visualSelect.onchange = function () {
            window.cancelAnimationFrame(drawVisual);
            visualize(stream);
          };
          voiceSelect.onchange = function () {
            voiceChange();
          };
          mute.onclick = voiceMute;
          function voiceMute() {
            // 切換靜音和取消靜音
            if (mute.id == "") {
              gainNode.gain.value = 0;
              // gain set to 0 to mute sound
              mute.id = "activated";
              mute.innerHTML = "Unmute";
            } else {
              gainNode.gain.value = 1;
              // gain set to 1 to unmute sound
              mute.id = "";
              mute.innerHTML = "Mute";
            }
          }

          使用 Web Audio API,時間可以非常精確地控制,幾乎沒有延遲,開發人員可以準確地響應事件,并且可以針對采樣數據進行編程。

          Web Audio API 也使開發者能夠控制音頻的空間化。在基于源 - 偵聽器模型的系統中,它允許控制平移模型和處理距離引起的衰減或移動源(移動偵聽)引起的多普勒效應。

          2.什么是 standardized-audio-context

          standardized-audio-context 是 Web Audio API 的跨瀏覽器包裝器,旨在嚴格遵循相關標準。standardized-audio-contex 包提供了 Web Audio API 的一個子集(幾乎是完整的),可以在每個受支持的瀏覽器中以可靠且一致的方式工作。


          與其他流行的 Polyfill 相比,standardized-audio-contex 不會在全局范圍內污染或修改任何內容。 換句話說,它不會引起任何副作用。 因此,可以在任何庫內安全使用,即所謂的 ponyfill。standardized-audio-contex 上下文的目標之一是僅實現缺失的功能,并盡可能避免重寫內置功能。

          但是,有些特性是無法以某種方式偽造的并使它們在與本機實現時具有相同的性能,其中最突出的是 AudioWorklet。

          Web Audio API 的 AudioWorklet 接口用于提供在單獨線程中執行的自定義音頻處理腳本,以提供非常低延遲的音頻處理。

          工作集的代碼在 AudioWorkletGlobalScope 全局執行上下文中運行,使用由工作集和其他音頻節點共享的單獨的 Web Audio 線程。

          通過 BaseAudioContext.audioWorklet 屬性訪問音頻上下文的 AudioWorklet 實例。

          值得一提的是,standardized-audio-contex 是用 TypeScript 編寫,這意味著它可以在任何 TypeScript 項目中無縫使用。與 TypeScript 提供的開箱即用的 Web 音頻 API 類型相比,standardized-audio-contex 導出的類型實際上與具體實現相匹配。 TypeScript 根據 Web Audio API 的 Web IDL 定義生成其類型,該定義并不總是與實際可用的實現匹配。

          目前,standardized-audio-context 在 Github 上通過 MTI 協議開源,有超過 0.6k 的 star、6.3k 的項目依賴量、NPM 周平均下載量 50k,是一個值得關注的前端開源項目。

          3.使用 standardized-audio-context

          standardized-audio-context 可在 npm 上使用,并且可以像其他庫一樣安裝。

          npm install standardized-audio-context

          然后,可以以如下方式導入 AudioContext 和 OfflineAudioContext:

          import { AudioContext, OfflineAudioContext } from "standardized-audio-context";
          • AudioContext :表示由鏈接在一起的音頻模塊構建的音頻處理圖,每個模塊都由一個 AudioNode 表示。AudioContext 控制其包含的節點創建以及音頻處理或解碼的執行。 在執行其他操作之前,開發者需要創建一個 AudioContext,因為所有事情都發生在上下文中。 建議創建一個 AudioContext 并重用它,而不是每次都初始化一個新的,可以同時將單個 AudioContext 用于多個不同的音頻源和管道。
          • OfflineAudioContext :是一個 AudioContext 接口,表示從鏈接在一起的 AudioNode 構建的音頻處理圖。 與標準 AudioContext 相比,OfflineAudioContext 不會將音頻渲染到設備硬件。 相反,它會盡可能快地生成它,并將結果輸出到 AudioBuffer。

          開發者還可以使用 jspm 等服務加載標準化音頻上下文。此時,上面的導入語句需要更改為指向 URL。

          import {
            AudioContext,
            OfflineAudioContext,
          } from "https://jspm.dev/standardized-audio-context";

          一旦 AudioContext 和 OfflineAudioContext 被導入,開發者就可以原生方法一樣使用。例如,以下代碼片段將產生一個漂亮且干凈的正弦波。

          import { AudioContext } from "standardized-audio-context";
          const audioContext = new AudioContext();
          const oscillatorNode = audioContext.createOscillator();
          // OscillatorNode 接口表示周期性波形,例如:正弦波。
          // 它是一個 AudioScheduledSourceNode 音頻處理模塊
          // 可以創建給定波的指定頻率,實際上是恒定的音調
          oscillatorNode.connect(audioContext.destination);
          oscillatorNode.start();

          另一種方法是使用 AudioNode 構造函數(在本例中為 OscillatorNode 構造函數)而不是工廠方法。

          import { AudioContext, OscillatorNode } from "standardized-audio-context";
          const audioContext = new AudioContext();
          const oscillatorNode = new OscillatorNode(audioContext);
          oscillatorNode.connect(audioContext.destination);
          oscillatorNode.start();
          // 指定開始播放提示音的確切時間

          4.本文總結

          本文主要和大家聊聊standardized-audio-context,即 Web Audio API 的跨瀏覽器包裝器,旨在嚴格遵循相關標準。相信通過本文的閱讀,大家對 standardized-audio-context 會有一個初步的了解,同時也會有自己的看法。

          因為篇幅有限,文章并沒有過多展開,如果有興趣,可以在我的主頁繼續閱讀,同時文末的參考資料提供了大量優秀文檔以供學習。最后,歡迎大家點贊、評論、轉發、收藏!

          參考資料

          https://github.com/chrisguttandin/standardized-audio-context

          https://www.npmjs.com/package/standardized-audio-context

          https://developer.mozilla.org/zh-CN/docs/Web/API/Web_Audio_API/Using_Web_Audio_API

          https://developer.mozilla.org/zh-CN/docs/Web/API/Web_Audio_API

          https://mdn.github.io/voice-change-o-matic/

          https://developer.mozilla.org/en-US/docs/Web/API/AudioContext

          https://habr.com/ru/articles/210422/


          主站蜘蛛池模板: 久久婷婷色一区二区三区| 八戒久久精品一区二区三区| 激情内射亚洲一区二区三区 | 无码人妻aⅴ一区二区三区有奶水 人妻夜夜爽天天爽一区 | 国产主播福利一区二区| A国产一区二区免费入口| 日韩精品一区二区三区毛片| 国产一区二区三区韩国女主播| 麻豆天美国产一区在线播放| 国产午夜精品一区二区三区不卡| 国产乱码精品一区二区三区四川 | 日本一区二区三区精品国产| 亚洲日韩精品国产一区二区三区 | 无码日韩人妻AV一区二区三区| 国内精品视频一区二区八戒| 中文乱码字幕高清一区二区| 精品欧洲av无码一区二区14| 色噜噜狠狠一区二区三区果冻| 无码人妻精品一区二区三区东京热 | 成人毛片一区二区| 欧亚精品一区三区免费| 日韩一区二区在线播放| 色噜噜狠狠一区二区三区| 免费播放一区二区三区| 中文字幕在线一区二区在线| 国产91精品一区二区麻豆网站| 日韩人妻精品无码一区二区三区| 无码人妻精品一区二区三区66| 无码一区二区三区免费| 久久久一区二区三区| 日本一区二区在线播放| 日日摸夜夜添一区| 成人毛片一区二区| 国产成人高清精品一区二区三区| 日韩视频在线观看一区二区| 曰韩精品无码一区二区三区| 国产激情无码一区二区app| 日韩人妻无码一区二区三区99| 欧美亚洲精品一区二区| 无码日韩人妻AV一区二区三区| 久久se精品一区二区|