chrome/IE实现动态添加音频文件，实现循环播放

最新推荐文章于 2023-05-12 12:14:29 发布

大大的飞碟

最新推荐文章于 2023-05-12 12:14:29 发布

阅读量981

点赞数

分类专栏： JavaScript实现功能文章标签：播放音频循环播放

本文链接：https://blog.csdn.net/qq_35388564/article/details/89633904

版权

JavaScript实现功能专栏收录该内容

1 篇文章 0 订阅

订阅专栏

实现思路：判断浏览器型号版本，js动态添加音频多媒体标签到html，实现自动播放及自动循环（设置属性）。

index.html文件

<!DOCTYPE html>
<html>
    <head>
        <title>Music</title>
        <meta charset="utf-8">
        <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
    </head>
    <body>
        <div>
            <button id="todu" onclick="clickTest()">点击一下</button>
            <button id="closeMusic" onclick="closeMusic()">关闭音乐</button>
        </div>
        <span id="alarmMusic" style="position:absolute;z-index:-1"></span>
        <script type="text/javascript" src="index.js"></script>
    </body>
</html>

index.js文件

//判断是否为高版本浏览器
var isHighVersionIE = true;
var isChrome = window.navigator.userAgent.indexOf("Chrome") !== -1;
$(document).ready(function(){
    //判断是否为高版本浏览器
    if(navigator.appName == "Microsoft Internet Explorer" && navigator.appVersion .split(";")[1].replace(/[ ]/g,"")=="MSIE8.0"){
		isHighVersionIE = false;
	} 
})
function clickTest(){
    if(isChrome || isHighVersionIE){
        var html = '<audio  id="player" autoplay="autoplay" loop="true" src="music/101.mp3"/>';
        $("#alarmMusic").empty();//动态改变
        $("#alarmMusic").html(html);//动态改变
    }else{
        var html = '<EMBED id="player" src="music/101.mp3" loop="true" width="0" height="0" play="true" loop="false" menu="true" quality="high" type="application/x-shockwave-flash" name="myFlash" swLiveConnect="true" ></EMBED>';
        $("#alarmMusic").empty();//动态改变
        $("#alarmMusic").html(html);//动态改变
    }
}
function closeMusic(){
    $("#alarmMusic").empty();//动态改变
}

总结：自动播放属性 autoplay，循环属性 loop。

大大的飞碟

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
chrome/IE实现动态添加音频文件，实现循环播放

实现思路：判断浏览器型号版本，js动态添加音频多媒体标签到html，实现自动播放及自动循环（设置属性）。index.html文件<!DOCTYPE html><html> <head> <title>Music</title> <meta charset="utf-8"> ...
复制链接

扫一扫

专栏目录