近年來，短視頻應(yīng)用一直備受大眾的喜愛，其中抖音成為最受歡迎的一款短視頻平臺。如果你也想學(xué)習(xí)開發(fā)自己的短視頻應(yīng)用，那么就需要掌握html5仿抖音錄像加音樂代碼了。下面就讓我們一起來看看吧。

//設(shè)置本地媒體流
function setMediaStream(){
if(!navigator.mediaDevices){
alert("你的設(shè)備不支持媒體流！");
}else{
navigator.mediaDevices.getUserMedia({audio:true, video:true})
.then(function(stream){
var video=document.getElementById('video-preview');
video.srcObject=stream;
video.play();
})
.catch(function(err){
console.log('相機(jī)與麥克風(fēng)獲取失?。″e誤信息：', err);
});
}
}
//拍照或錄像
function takePicture(){
var button=documnet.getElementById('take-picture');
var video=document.getElementById('video-preview');
var canvas=document.getElementById('canvas-snapshot');
var context=canvas.getContext('2d');
if(button.value=='拍照'){
context.drawImage(video,0,0, canvas.width, canvas.height);
var dataURL=canvas.toDataURL('image/png');
var img=document.createElement('img');
img.src=dataURL;
img.style.width='100px';
img.style.height='100px';
document.body.appendChild(img);
}else{
var mediaRecorder=new MediaRecorder(stream);
mediaRecorder.start();
video.style.display="none";
var stopButton=document.getElementById('stop-picture');
stopButton.value="停止錄像";
stopButton.style.display="inline";
button.style.display="none";
mediaRecorder.ondataavailable=function(e){
chunks.push(e.data);
}
mediaRecorder.onstop=function(e){
var blob=new Blob(chunks,{'type': 'video/mp4'});
chunks=[];
var videoURL=URL.createObjectURL(blob);
var video=document.createElement('video');
video.controls=true;
video.src=videoURL;
document.body.appendChild(video);
stopButton.style.display="none";
button.style.display="inline";
video.style.width='100px';
video.style.height='100px';
}
}
}
//音樂播放控制
var music=document.getElementById('music');
var musicButton=document.getElementById('music-control');
function playMusic(){
if(music.paused){
music.play();
musicButton.value="停止";
}else{
music.pause();
musicButton.value="播放";
}
}
music.addEventListener('ended', function(){
musicButton.value="播放";
});

上述代碼中，我們定義了三個函數(shù)，分別用于設(shè)置本地媒體流、拍照或錄像、以及音樂播放控制。具體實現(xiàn)過程中，我們借助了h5新特性MediaRecorder對于本地視頻流的錄像，同時使用canvas對于本地視頻流拍照。音樂播放控制則是通過HTML5的audio對象的play()和pause()方法實現(xiàn)的。

如果您正在開發(fā)一款短視頻應(yīng)用，那么上述代碼不容錯過！希望本文對您有所幫助。