App下載

在html5中怎么實(shí)現(xiàn)動(dòng)態(tài)音頻圖?案例代碼分享 !

著名奶茶鑒定家 2021-08-16 11:02:26 瀏覽數(shù) (2620)
反饋

在今天小編和大家分享有關(guān)于:“在html5中怎么實(shí)現(xiàn)動(dòng)態(tài)音頻圖?”這個(gè)問題的相關(guān)內(nèi)容,希望對(duì)大家有所幫助!那么下面我們就來說說怎么實(shí)現(xiàn)吧!

概要

本次我們會(huì)使用html5和js開發(fā)一個(gè)動(dòng)態(tài)音頻圖

用到的技術(shù)點(diǎn):
(1)js
(2)canvas + audio
(3)Web Audio API

實(shí)現(xiàn)方式:

(1)首先對(duì)于界面實(shí)現(xiàn)的考慮,由于區(qū)塊非常多,我們使用傳統(tǒng)dom節(jié)點(diǎn)實(shí)現(xiàn)是非常困難的(會(huì)占用大量的電腦CPU)。在這里,我們考慮使用canvas進(jìn)行渲染
(2)前端中,我們遵循盡量少用js控制dom節(jié)點(diǎn)的原則。能用css3實(shí)現(xiàn)的特效,就不要用js實(shí)現(xiàn)。(因?yàn)閖s不是標(biāo)記語(yǔ)言,而是腳本語(yǔ)言,與html5不是同一種語(yǔ)言。會(huì)浪費(fèi)瀏覽器大量時(shí)間加載,造成瀏覽器性能的浪費(fèi))。因此,用js就少用dom,用dom就盡量用css。
(3)通過Web Audio API在音頻節(jié)點(diǎn)上進(jìn)行音頻操作(即實(shí)現(xiàn)音頻可視化),流程圖如下:

在圖中,音頻上下文提供了音頻處理的一套系統(tǒng)方法。輸入源指音樂文件,通過名稱引入;效果就是對(duì)輸入源進(jìn)行加工,如制作音頻圖、音波圖、3D環(huán)繞、低音音效等;輸出就是把效果輸出到耳機(jī)、揚(yáng)聲器等目的地。

canvas引入

在當(dāng)下,除了布局使用dom節(jié)點(diǎn)外,特效基本都是通過canvas實(shí)現(xiàn)了。

canvas好處:
(1)寫特效非常強(qiáng)大,性能優(yōu)
(2)用于做游戲。由于flash將于2020年退役,現(xiàn)在的游戲開始轉(zhuǎn)向用html5制作
(3)前端渲染大數(shù)據(jù),數(shù)據(jù)可視化,大屏數(shù)據(jù)展示

canvas流程:通過js創(chuàng)建畫筆:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style type="text/css">
        *{
            margin: 0;
            /* 外邊距為0,使canvas能夠占滿全屏 */
        }
        #canvas{
            background: linear-gradient(
                135deg,
                rgb(142,132,133) 0%,
                rgb(230,132,110) 100%
            );
            /*創(chuàng)建線性漸變圖像*/
        }
        
    </style>
</head>
<body>
    <canvas id="canvas" width="500" height="500"></canvas>

    <script>
        var cxt=canvas.getContext('2d');//創(chuàng)建了畫筆
        cxt.beginPath();//開始畫
        cxt.closePath();//畫完了
        
        cxt.fillStyle='#f2f';
        cxt.arc(250,250,100,0,2*Math.PI,false);
        cxt.fill();
    </script>
</body>
</html>

在創(chuàng)建線性漸變圖像時(shí),若100%后邊加“,”,谷歌便加載不出來;若不加,便能加載出來。但是不知道為何

這里尤其注意js里canvas的流程,創(chuàng)建畫筆-》開始畫-》畫完了-》補(bǔ)充顏色、形狀信息。其中前三步都是套路,只有如何去畫根據(jù)任務(wù)的不同,代碼不同

Web Audio APi流程

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <audio id="audio" src="mp3/1.mp3" controls></audio>

    <script>
        
        
        var oCtx=new AudioContext();//創(chuàng)建音頻對(duì)象

        var oAudio=document.querySelector('audio');
        var audioSrc=oCtx.createMediaElementSource(oAudio);
        //給音頻對(duì)象創(chuàng)建媒體源

        var analyser=oCtx.createAnalyser();//創(chuàng)建分析機(jī)
        audioSrc.connect(analyser);//把分析機(jī)連接到媒體源上
        analyser.connect(oCtx.destination);//把分析機(jī)得到的結(jié)果和揚(yáng)聲器相連

    </script>
</body>
</html>

這里要注意的是,audio中的autoplay、js中的audio.play()已經(jīng)失效(谷歌瀏覽器的安全策略:聲音不能自動(dòng)播放,必須在用戶有了操作后才能播放)

上述流程中少了最關(guān)鍵的一步:如何分析音頻數(shù)據(jù),這一步根據(jù)實(shí)現(xiàn)的任務(wù)不同,內(nèi)容不同。但是其余的步驟都是一樣的,滿滿的套路

動(dòng)態(tài)音頻圖的開發(fā)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
        *{
            margin: 0;
        }
        #canvas{
            background:linear-gradient(
                135deg,
                rgb(142,132,133) 0%,
                rgb(230,132,110) 100%
            );
        }
    </style>
</head>
<body>
    <audio id="audio" src="mp3/1.mp3" controls></audio>
    <button type="button" onclick="play()"></button>
    <canvas id="canvas"></canvas>

    <script>
        //先引入canvas畫筆的創(chuàng)建流程
        var cCxt=canvas.getContext('2d');//創(chuàng)建2D畫筆
        cCxt.beginPath();//開始畫
        cCxt.closePath();//畫完了

        //設(shè)計(jì)畫布的樣式
        //設(shè)置畫布大小為整個(gè)屏幕
        canvas.width=window.innerWidth;
        canvas.height=window.innerHeight;
        //設(shè)置線條的漸變顏色
        var oW=canvas.width; var oH=canvas.height;
        var color=cCxt.createLinearGradient(oW/2,oH/2,oW/2,oH/2-100);
        color.addColorStop(0,'#000');
        color.addColorStop(.5,'#069');
        color.addColorStop(1,'#f6f');

        
        function play(){
            //先引入API函數(shù),走完Web Audio API的流程
            var oCtx=new AudioContext();//創(chuàng)建音頻對(duì)象
            var oAudio=document.querySelector('audio');
            var audioSrc=oCtx.createMediaElementSource(oAudio);//為音頻對(duì)象創(chuàng)建媒體源
            var analyser=oCtx.createAnalyser();//為音頻對(duì)象創(chuàng)建分析機(jī)
            audioSrc.connect(analyser);//將分析機(jī)與媒體源連接
            analyser.connect(oCtx.destination);//將分析機(jī)與揚(yáng)聲器相連接
            var count=80;//音頻條的條數(shù)
            var voiceHeight=new Uint8Array(analyser.frequencyBinCount);//建立一個(gè)數(shù)據(jù)緩沖區(qū)(此時(shí)為空)
        
            setInterval(draw(analyser,voiceHeight,count),1000);
            oAudio.play();
        
         }

        function draw(analyser,voiceHeight,count){
            analyser.getByteFrequencyData(voiceHeight);//將當(dāng)前頻率數(shù)據(jù)傳入到無符號(hào)字節(jié)數(shù)組中,進(jìn)行實(shí)時(shí)連接
            var step=Math.round(voiceHeight.length/count);//每隔step個(gè)數(shù),取一個(gè)數(shù)組里的數(shù)
            for(var i=0;i<count;i++){
                var audioHeight=voiceHeight[step*i];
                cCxt.fillStyle=color;
                cCxt.fillRect(oW/2+(i*10),oH/2,7,-audioHeight);
                cCxt.fillRect(oW/2-(i*10),oH/2,7,-audioHeight);
             }
           //console.log(voiceHeight);
        }
        

        
    </script>
</body>
</html>

上邊的代碼是不可行的,找了一下午也沒找出錯(cuò)誤到底出在哪里...問題主要如下:

(1)在谷歌瀏覽器中,顯示歌在播放,但是沒有聲音。console.log(voiceHeight)即圖中注釋部分沒有注釋掉時(shí),voiceHeight只出現(xiàn)一次,而不是1000ms出現(xiàn)一次。沒有圖像

(2)在edge瀏覽器中,歌曲能正常播放。voiceHeight仍然只出現(xiàn)一次,沒有圖像

那么以上就是有關(guān)于:“在html5中怎么實(shí)現(xiàn)動(dòng)態(tài)音頻圖?”這個(gè)方面的全部?jī)?nèi)容分享,更多有關(guān)于html5這方面的相關(guān)內(nèi)容我們都可以在W3Cschool進(jìn)行學(xué)習(xí)和了解!



0 人點(diǎn)贊