javascript_js audio标签-CSDN博客

本文链接：https://blog.csdn.net/a12336487213/article/details/96431406

1.canPlayType():用JavaScript检测浏览器是否支持音频

<script type/javascript>
function checkAudio(){
	var myAudio = document.createElement("audio");
	if(myAudio.canPlayType){    //返回是或非或maybe
		if("" != myAudio.canPlayType("audio/mpeg")){  //不支持返回空字符串
			document.write("您的浏览器支持mp3编码。<br />");
			}
		if(  "" != myAudio.canPlayType('audio/ogg; codecs="vorbis"')) {
			document.write("您的浏览器支持oog编码<br />");
			}
		//if ( "" != myAudio.canPlayType('audio/ogg; codecs="vorbis"')) {
          //   document.write("您的浏览器支持oog编码。<br>");
        	//}
		if("" !=myAudio.canPlayType('audio/mp4; codecs="mp4a.40.5"')){
			document.write("您的浏览器支持acc编码<br />");
			}	
		}
		else{
			document.write("您的浏览器不支持要检测的音频格式。");
			}
	}
window.onload = function(){
	checkAudio();
	}
</script>

结论：chrom支持的种类最多，其他浏览器不尽相同

2.canPlayType():用JavaScript检测浏览器是否支持视频格式

<script type/javascript>
function checkVideo(){
	var myVideo = document.createElement("video");
	if(myVideo.canPlayType){    //返回是或非或maybe
		document.write("返回不为空<br />");
		if("" != myVideo.canPlayType('video/mp4;codecs="avc1.64001E"')){  //不支持返回空字符串
			document.write("您的浏览器支持h264编码。<br />");
			}
		if("" !=myVideo.canPlayType('video/ogg;codecs="vp8"')){
			document.write("您的浏览器支持vp8编码<br />");
			}
		if("" !=myVideo.canPlayType('video/ogg;codecs="theora"')){
			document.write("您的浏览器支持theora编码<br />");
			}	
		}
		else{
			document.write("您的浏览器不支持要检测的视频格式。");
			}
	}
window.onload = function(){
	checkVideo();
	}
</script>

结论：chrom支持的种类最多，其他浏览器不尽相同

3.audio标签播放音频：

source标签可以指定多个源值，供浏览器自由选择，而用audio的src属性只能指定一个源文件。

背景音乐，自动循环播放音频：

4.播放视频

5.js视频函数

js音频视频通用函数：

autobuffer：自动缓存。

buffered可读属性，确认浏览器已经缓存，与autoplay配合使用

currentSrc可读属性，返回媒体文件的URL地址，若没有，则返回空

currenttime：获取当前的播放的时间

defaultplayrate：播放的倍速

duration：播放的时间默认为秒

ended：获取是否播放结束

errer：没有出现错误返回no

loop：重复播放

muted：是否静音

paused：媒体是否停止播放

play:继续播放

6.用脚本控制音乐播放：

<style type="text/css">
body{background:url(file:///D|/%E5%A3%81%E7%BA%B8/%E8%83%8C%E6%99%AF%E5%9B%BE/%E7%B2%89%E7%B3%BB%E5%BB%BA%E7%AD%91/59fe8a3a20afd202.jpg!600x600.jpg) no-repeat;}
#toggle{ position:absolute;
left:311px;
top:293px;}
</style>

<title>无标题文档</title>
</head>

<body>
<audio id = "music" controls>
	<source src="李荣浩-李白.mp3">
</audio>
<button id="toggle" onclick="toggleSound()">播放</button>
<script type="text/javascript">
function toggleSound(){
	var music = document.getElementById("music");
	var toggle = document.getElementById("toggle");
	
	if(music.paused){
		music.play();
		toggle.innerHTML = "暂停";
		
		}
	else{
		music.pause();
		toggle.innerHTML = "播放";
		}
	}
</script>
</body>

7.抓取视频帧，并且点击视频帧调到相对应的时间轴

<!DOCTYPE html>
<html>
<title></title>
<video id="movies" autoplay oncanplay="startVideo()" onended="stopTimeline()" autobuffer="true"
    width="400px" height="300px">
    <source src="medias/volcano.ogv" type='video/ogg; codecs="theora, vorbis"'>
    <source src="medias/volcano.mp4" type='video/mp4'>
</video>
<canvas id="timeline" width="400px" height="300px">
<script type="text/javascript">
    var updateInterval = 5000;
    var frameWidth = 100;
    var frameHeight = 75;
    var frameRows = 4;
    var frameColumns = 4;
    var frameGrid = frameRows * frameColumns;
    var frameCount = 0;
    var intervalId;
    var videoStarted = false;
    function startVideo() {
        if (videoStarted)
          return;
        videoStarted = true;
        updateFrame();
        intervalId = setInterval(updateFrame, updateInterval);
        var timeline = document.getElementById("timeline");
        timeline.onclick = function(evt) {
            var offX = evt.layerX - timeline.offsetLeft;
            var offY = evt.layerY - timeline.offsetTop;
            var clickedFrame = Math.floor(offY / frameHeight) * frameRows;
            clickedFrame += Math.floor(offX / frameWidth);
            var seekedFrame = (((Math.floor(frameCount / frameGrid)) *
                                frameGrid) + clickedFrame);
            if (clickedFrame > (frameCount % 16))
                seekedFrame -= frameGrid;
            if (seekedFrame < 0)
              return;
            var video = document.getElementById("movies");
            video.currentTime = seekedFrame * updateInterval / 1000;
            frameCount = seekedFrame;
        }
    }
    function updateFrame() {
        var video = document.getElementById("movies");
        var timeline = document.getElementById("timeline");
        var ctx = timeline.getContext("2d");
        var framePosition = frameCount % frameGrid;
        var frameX = (framePosition % frameColumns) * frameWidth;
        var frameY = (Math.floor(framePosition / frameRows)) * frameHeight;
        ctx.drawImage(video, 0, 0, 400, 300, frameX, frameY, frameWidth, frameHeight);
        frameCount++;
    }
    function stopTimeline() {
        clearInterval(intervalId);
    }
  </script>
</html>