【html5 audio】音乐播放，灵动的音符效果

最新推荐文章于 2024-05-07 10:11:15 发布

snow_finland

最新推荐文章于 2024-05-07 10:11:15 发布

阅读量4k

点赞数

分类专栏： audio 播放音乐 HTML5 效果文章标签： html5 audio 播放音乐效果

本文链接：https://blog.csdn.net/snow_finland/article/details/42295649

版权

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'

最低0.47元/天解锁文章

snow_finland

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
【html5 audio】音乐播放，灵动的音符效果

html 部分 My Coffee Stream 0.1html,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
复制链接

扫一扫

专栏目录