<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Как создать адаптивный аудио-плеер для сайта | Демонстрация для сайта s-sd.ru</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="description" content="Responsive & Touch-Friendly Audio Player" />
<meta name="author" content="Osvaldas Valutis, www.osvaldas.info" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Lato:400,700" />
<link rel="shortcut icon" href="../favicon.ico">
<link rel="stylesheet" href="css/reset.css" />
<link rel="stylesheet" href="css/demo.css" />
<link rel="stylesheet" href="css/audioplayer.css" />
<script src="js/jquery.js"></script>
<script src="js/audioplayer.js"></script>
<script>
/*
VIEWPORT BUG FIX
iOS viewport scaling bug fix, by @mathias, @cheeaun and @jdalton
*/
(function(doc){var addEvent='addEventListener',type='gesturestart',qsa='querySelectorAll',scales=[1,1],meta=qsa in doc?doc[qsa]('meta[name=viewport]'):[];function fix(){meta.content='width=device-width,minimum-scale='+scales[0]+',maximum-scale='+scales[1];doc.removeEventListener(type,fix,true);}if((meta=meta[meta.length-1])&&addEvent in doc){fix();scales=[.25,1.6];doc[addEvent](type,fix,true);}}(document));
</script>
<script>
$(document).ready(function(){
$('audio').audioPlayer();
$('audio').on('play', function(){
$('.audioplayer-playing').not($(this).parents('.audioplayer-playing')).find('.audioplayer-playpause').trigger('click');
});
});
</script>
</head>
<body>
<div align=center>
Песня строить и жить помогает
<div id="wrapper">
<audio preload="auto" controls>
<source src="audio/BlueDucks_FourFlossFiveSix.mp3">
</audio>
</div>
Песня строить и жить помогает
<div id="wrapper">
<audio preload="auto" controls>
<source src="audio/04Sambadi.mp3">
</audio>
</div>
</div>
</body>
</html> |
