本文主要是介绍【html5 audio】音乐播放，灵动的音符效果，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
html 部分
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html" charset="utf-8" />
<meta name="viewport" content="initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>My Coffee Stream 0.1</title>
<style type="text/css">
html,body,div,img{margin:0;padding:0;
}
a,a:hover{text-decoration:none;
}
.background{width:100%;position:fixed;top:0;left:0;
}
.audio_box{position:absolute;right:20px;top:60px;width:130px;height:80px;text-align:center;color:#fff;
}
.audio_box .audio_btn_box{position:absolute;left:60px;width:52px;z-index:2;
}
</style>
</head><body>
<img src="images/cover.png" class="background resizeContainer"/><!--任性地加个背景-->
<div class="audio_box" id="J_audio_box"><div class="audio_btn_box"><img src="images/play.png" class="icon" /><span id="J_audio_txt" class="txt">暂停</span></div>
</div>
<script type="text/javascript" src="js/zepto.js"></script><!--js库文件，网上都有-->
<script type="text/javascript" src="js/coffee.js"></script>
<script type="text/javascript">
var isiOS = navigator.userAgent.match('iPad') || navigator.userAgent.match('iPhone') || navigator.userAgent.match('iPod');
var _this_audio = {
_audio : null,
_audio_val : false,
init : function(){
var options_audio = {
loop: true,
preload: "auto",
autoplay: "autoplay",
src: 'YouAndMe.mp3'
}
_this_audio._audio = new Audio();
for (var key in options_audio) {
_this_audio._audio[key] = options_audio[key];
}
_this_audio._audio.load();
if(isiOS){//由于ios不能自动播放，所以ios的浏览器默认为暂停状态，而其它为自动播放状态
$('#J_audio_txt').text('播放');
_this_audio._audio_val = true;
}
_this_audio.bindevent();
},
audio_play : function(){
_this_audio._audio_val = false;
if(_this_audio._audio){
_this_audio._audio.play();
}
},
audio_pause : function(){
_this_audio._audio_val = true;
if (_this_audio._audio){
_this_audio._audio.pause();
}
},
control : function(){
if (!_this_audio._audio_val) {
_this_audio.audio_pause();
} else {
_this_audio.audio_play();
}
},
bindevent : function(){
$('#J_audio_box .audio_btn_box').on('click', _this_audio.control);
$(_this_audio._audio).on('play'这篇关于【html5 audio】音乐播放，灵动的音符效果的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
