1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>HTML5 Audio Player with Playlist</title>
<script>
function loadSong(elt, e) {
if(!e) var e = window.event;
document.getElementById("player").src=elt.href;
document.getElementById("player").load();
document.getElementById("player").play();
return false;
}
window.onload = function() {
links = document.getElementById("playlist").getElementsByTagName("a");
for(var i = 0; i<links.length; i++) {
links[i].onclick=function(e) { return loadSong(this, e); };
}
}
</script>
<title><$BlogTitle$></title>
<meta http-equiv="Content-Type" content="text/html; charset=<$BlogEncoding$>" />
<meta http-equiv="content-language" content="<$BlogLanguage$>" />
<meta name="Description" content="<$BlogDescription$>" />
<meta name="Keywords" content="<$BlogKeywords$>" />
<meta name="generator" content="CanalBlog - http://www.canalblog.com" />
<BlogSiteFeed>
<link rel="alternate" type="application/rss+xml" title="RSS" href="<$BlogSiteFeedURL$>" />
</BlogSiteFeed>
<link rel="EditURI" type="application/rsd+xml" title="RSD" href="<$BlogEditURIURL$>" />
<link rel="stylesheet" href="<$BlogCSSURL$>" type="text/css" />
<title>HTML5 Audio Player with Playlist</title>
<script>
function loadSong(elt, e) {
if(!e) var e = window.event;
document.getElementById("player").src=elt.href;
document.getElementById("player").load();
document.getElementById("player").play();
return false;
}
window.onload = function() {
links = document.getElementById("playlist").getElementsByTagName("a");
for(var i = 0; i<links.length; i++) {
links[i].onclick=function(e) { return loadSong(this, e); };
}
}
</script>
</head>
<body><div id="container"><div id="topbar-logo"><div class="logolink"><a href="<$BlogURL$>"></a></div></div><div id="topbar"><h1><a href="<$BlogURL$>"><$BlogTitle$></a></h1><h2><$BlogDescription$></h2></div><div id="content"><div class="blogbody">
<Blogger> <BlogDateHeader>
<h2><$BlogDateHeaderDate$></h2>
</BlogDateHeader><a name="<$BlogItemNumber$>"></a> <BlogItemTitle>
<h3><$BlogItemTitle$></h3>
</BlogItemTitle>
<CBIfCarrousel>
<div class="carrousel_slider_div">
<ul id="carrousel_slider" class="carrousel_slider">
<CBCarrousel>
<li>
<div class="carrousel_slider_img">
<a href="<$BlogItemURL$>" title="<$Scanner lumière bleue$>"><img src="<$BlogItemCoverURL$>" /></a>
</div>
<a href="<$BlogItemURL$>" class="carrousel_slider_caption" title="<$BlogItemTitle$>"><$BlogItemTitle$></a>
</li>
</CBCarrousel>
</ul>
</div>
</CBIfCarrousel>
<p><$BlogItemBody$></p>
<div class="itemfooter">Posté par <$BlogItemAuthorNickname$> à <$BlogItemDateTime$> <BlogItemCategories> - <a href="<$BlogItemCategoryLink$>" title="Autres messages dans cette catégorie"><$BlogItemCategoryName$></a> </BlogItemCategories> <BlogItemComments> - <a href="<$BlogItemCommentsURL$>" title="Commentez ce message">Commentaires [<$BlogItemCommentsCount$>]</a> </BlogItemComments> <BlogItemTrackBacks> - <a href="<$BlogItemTrackBacksURL$>" title="Rétroliens">Rétroliens [<$BlogItemTrackBacksCount$>]</a> </BlogItemTrackBacks> - Permalien [<a href="<$BlogItemURL$>" title="Lien permanent vers ce message">#</a>]</div>
</Blogger>
<$CBControlNavLinks$></div></div><div id="rightbar"><div class="navlinks">
<div class="title">RADIO BLOG</div>
<li class="module-list-item"><div class="typelist-note-label">Radioblog JPop, Enka...</div><div class="typelist-note"><a href="http://dduboisnospam.free.fr/radio.blog/index.php?autoplay=0" onclick="window.open(this.href, '_blank', 'width=222,height=300,scrollbars=no,resizable=no,toolbar=no,directories=yes,location=no,menubar=no,status=no,left=0,top=0'); return false"><img src="http://storage.canalblog.com/68/33/66209/5516981.jpg" width="166" height="40" border="0"></a></div></li>
--
<div>
<audio tabindex="0" id="player" controls="controls">
balise audio HTML5 inconnue</audio>
<ul id="playlist">
<li><a href="http://dduboisnospam.free.fr/radio.blog/sounds/Asie Faye Wong Chess.rbs" onclick="loadSong()">Asie Faye Wong Chess.rbs</a></li>
<li><a href="http://dduboisnospam.free.fr/radio.blog/sounds/Asie Faye Wong Decadence.rbs" onclick="loadSong()">Asie Faye Wong Decadence.rbs</a></li>
<li><a href="http://dduboisnospam.free.fr/radio.blog/sounds/Asie Faye Wong Face.rbs" onclick="loadSong()">Asie Faye Wong Face.rbs</a></li>
</ul>
<ul id="signature">cc-by-sa <a href="http://dduboisnospam.free.fr/radio.blog/sounds/"
target="_blank">signature</a></ul>
</div>
--
<CBCalendar><$BlogCalendar$></CBCalendar><BloggerFriendLinks><BlogFriendLinkHeader>
<div class="title"><$BlogFriendLinkCategoryName$></div>
<ul>
</BlogFriendLinkHeader>
<li><a href="<$BlogFriendLinkURL$>"><$BlogFriendLinkName$></a></li>
<BlogFriendLinkFooter>
</ul>
</BlogFriendLinkFooter> </BloggerFriendLinks><BlogSiteFeed>
<div class="item"><a href="<$BlogSiteFeedURL$>" title="Syndiquez ce blog">Version XML</a></div>
</BlogSiteFeed>
</div></div><div class="clear">*</div></div></body></html> |
Partager