ホームページ > ウェブフロントエンド > H5 チュートリアル > html5の音声(オーディオ)の解析

html5の音声(オーディオ)の解析

不言
リリース: 2018-08-06 11:13:17
オリジナル
3366 人が閲覧しました

この記事で共有した内容は HTML5 でのオーディオ (音声) の分析に関するもので、困っている友人が参考になれば幸いです。

HTML5 オーディオ バックグラウンドの使用

これまで、Web ページ上でオーディオを再生することを目的とした標準はまだありませんでした。現在、ほとんどのオーディオは Flash などのプラグインを介して再生されます。ただし、すべてのブラウザに同じプラグインがあるわけではありません。 HTML5 では、audio 要素を通じてオーディオを含める標準的な方法が指定されており、これによりサウンド ファイルまたはオーディオ ストリームを再生できます。

オーディオ形式

現在、audio 要素は、Ogg Vorbis、Mp3、Wav の 3 つのオーディオ形式をサポートしています。これは、次のオーディオ形式ブラウザのサポートです:

オーディオ形式 IE 9Firefox 3.5 Opera 10.5Chrome 3.0Safari 3.0Ogg Vorbis√√√ MP3 √√√Wav√√√



audio要素を使用してオーディオ再生を実装します

controls属性 の間に挿入されるコンテンツは、audio 要素をサポートしていないブラウザで表示するためのものです。ブラウザ互換のオーディオ形式の問題を解決します。質問。上記の 5 つのブラウザでオーディオを再生できるようにするために、以下の 2 つのソース要素が使用されています。簡単なコードは次のとおりです:

<audio controls="controls">该浏览器不支持该格式音频的播放    
<source src="../videoAudio/1.mp3"></source>
<source src="../videoAudio/1.wav"></source>
</audio>
ログイン後にコピー

Domを使用してオーディオを操作します

カスタムボタンを使用してcontrols属性の再生および一時停止機能を実装します。 コードは次のとおりです:

<button onclick="controlPlay()">播放/停止</button>
        <audio id="vioce" >该浏览器不支持该格式音频的播放
            <source src="../videoAudio/1.mp3"></source>
            <source src="../videoAudio/1.wav"></source>
        </audio>
        <script>
            var voice =document.getElementById("vioce");
            function controlPlay(){
                if(voice.paused){//判断是否停止了
                    voice.play();//播放
                } else{
                    voice.pause();//停止
                }
            }
        </script>
ログイン後にコピー

オーディオ形式変換(Wav形式に変換します) MP3 形式に)

1. まず ffmpeg をダウンロードし、URL www.ffmpeg.org (オープンソース URL) を入力し、windows と入力して Windows バージョンのファイルをダウンロードします。

2. ffmpeg 圧縮ファイル (ffmpeg-20180803-5aeb3b0-win32-static.zip を例にします) を解凍し、ffmpegbin ディレクトリ (G: mydeveloperapplicationhbuilderhtml5ffmpeg-20180803-5aeb3b0-win32-staticbin) へのパスを追加します。環境変数のパス。

3. 環境変数を設定した後、DOS コマンド フォームに ffmpeg と入力して、実行できるかどうかをテストします。

4. DOS コマンド ウィンドウで mp3 オーディオ ファイルがあるディレクトリに切り替え、最後に「ffmpeg -i 1002_c.wav -f mp3 -acodec libmp3lame -y 2.mp3」と入力します (ここでは、1002_c.wav を 2 に置き換えます) .mp3)。

5. ffmpeg から他のオーディオ形式および一般的なコマンドへの変換。

おすすめ関連記事:

html5のvideo(ビデオ)要素の解析

svgでの要素の使い方とマーカー属性の導入

以上がhtml5の音声(オーディオ)の解析の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート