h5 音乐播放

Posted 2020-06-09

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了h5 音乐播放相关的知识，希望对你有一定的参考价值。

<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no" />
<meta name="apple-touch-fullscreen" content="YES" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta charset="utf-8">
<title>无标题文档</title>
</head>

<body>

<audio id="my"  controls="true"  autoplay="autoplay" loop="loop">
<source src="http://map.baidu.com/zt/y2015/waimaibear/mobile/others/WalkingWithAPet-1.mp3">
你的浏览器不支持HTML5
</audio>

<input type="button" onclick="document.getElementById(‘my‘).play()" value=‘播放‘/>
<input type="button" onclick="document.getElementById(‘my‘).pause()" value=‘暂停‘/>


<div id="star"> 开始</div>
<div>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
var audio=$(‘#my‘)[0];
var btn=$(‘#star‘);


$(‘#star‘).on("click",function(){
    if(audio.paused){
        audio.play();
        }else{
            audio.pause();
            }
    
    
})




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

以上是关于h5 音乐播放的主要内容，如果未能解决你的问题，请参考以下文章

苹果手机微信浏览器H5播放器无法打开即播放音乐解决方案