瀏覽器實現HTML5發送語音功能

這是一次後台同事讓做的一個功能，但是在手機端兼容不好，Safari清一色不支持，導致後來沒有用上，想看效果的夥伴可以用pc端瀏覽器打開模擬手機的功能查看，查看demo鏈接移步文章尾部。

也是藉助插件實現的，插件主要做了AudioContext的一些封裝，處理錄好的音頻轉換成mp3文件，我這裡只做了錄音功能，發送到伺服器的操作沒用做，具體效果圖如下：

想要免費學習web前端和免費學習資料的 可以加裙六二三九六六八零六

主要功能代碼：

學習web前端開發點擊鏈接加入群【網頁製作html5】：網頁製作html5

html代碼

Jon

鬆開發送消息

js代碼

// 禁止瀏覽器滑鼠右鍵功能

document.oncontextmenu = function() {

return false;

}

// 創建一個錄音對象

var recorder = new MP3Recorder({

funCancel: function (msg) {

console.log(msg);

recorder = null;

}

});

var mp3Blob,

oBtn = document.querySelector('input[type="button"]'),

oHideTips = document.querySelector('.hide-tips-wrap'),

oMarkIcon = oHideTips.querySelector('.tips-icon'),

oTipsTxt = oHideTips.querySelector('.tips-txt');

oBtn.addEventListener('touchstart', function() {

recorder.start();

});

oBtn.addEventListener('touchend', function() {

recorder.stop();

recorder.getMp3Blob(function (blob) {

mp3Blob = blob;

var url = URL.createObjectURL(mp3Blob),

// 獲取語言列表容器

oWrap = document.querySelector('.voice-wrap'),

// 創建li

oLi = document.createElement('li'),

// 創建audio標籤

oAudio = document.createElement('audio'),

// 創建a標籤

oHref = document.createElement('a'),

// 創建播放語音顯示按鈕

oSpanPlay = document.createElement('span'),

// 創建播放語音總時間

oNumberBox = document.createElement('i'),

// 創建頭像img

oImg = new Image();

// 給audio標籤添加媒體鏈接

oAudio.src = url;

// 給a標籤添加下載鏈接

oHref.href = url;

oHref.download = new Date().toISOString() + '.mp3';

oHref.innerHTML = oHref.download;

// 給圖片添加路徑

oImg.src = '../images/picture.jpg';

oSpanPlay.className = 'play-wrap';

oNumberBox.className = 'num-box';

setTimeout(function() {

var nDuration = conversionTime( oAudio.duration );

// 判斷時間是否少於一秒

if( isNaN(nDuration) || nDuration == 0 ) {

oMarkIcon.style.backgroundImage = 'url(../images/mark.png)';

oTipsTxt.innerText = '說話時間太短';

// 關閉提示層

setTimeout(function() {

oMarkIcon.style.backgroundImage = 'url(../images/voice.png)';

oTipsTxt.innerText = '鬆開發送消息';

}, 500);

} else {

oNumberBox.innerText = nDuration + '″';

// 將創建好的對象放入li標籤

oLi.appendChild(oAudio);

oLi.appendChild(oHref);

oLi.appendChild(oImg);

oLi.appendChild(oSpanPlay);

oLi.appendChild(oNumberBox);

oLi.className = 'clearfix';

// 將li標籤放入語言列表容器

oWrap.appendChild(oLi);

// 獲取播放語音按鈕總的寬度

var nSpanTotalWidth = parseFloat(getStyle(oLi, 'width')) * 0.7 - oSpanPlay.offsetWidth;

// 當前播放按鈕寬度 當前距離 = 當前時間 / 總時間 * 總距離 + 初始距離

var bMark = true;

// 播放語音

oSpanPlay.onclick = function() {

if( bMark ) {

this.style.backgroundImage = 'url(../images/voiceplayer1.gif)';

oAudio.play();

oAudio.addEventListener('timeupdate', function() {

if( this.ended ) {

oSpanPlay.style.backgroundImage = 'url(../images/voice2.png)';

}

});

} else {

this.style.backgroundImage = 'url(../images/voice2.png)';

oAudio.pause();

}

bMark = !bMark;

}

// 關閉提示層

setTimeout(function() {

}, 500);

}

}, 100);

});

});

// 轉換毫秒時間為秒

function conversionTime( t ){

var s = Math.floor( t % 60 );

return s;

}

// 獲取樣式

function getStyle( obj, attr ) {

return window.getComputedStyle(obj, null)[attr]

}

demo（網頁鏈接）

那麼如何去提升我們的web前端技術呢？

本次，興趣部落攜手行業大咖，擁有8年前端 開發經驗的大型互聯網企業資深前端技術總監海牙組織大型前端免費公開講座。

此次講座分兩個批次：

1）、零基礎到初級入門

適合人群：小白新手、初級前端開發

2）、中高級前端批次

適合人群：1-3年前端開發經驗者

想要免費學習web前端和免費學習資料的 可以加裙六二三九六六八零六

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！