Lecteur MP3 avec playlist sur blog : fin techno flash
Salut tout le monde,
Désolé si je ne suis pas dans le bon forum, je suis DBA Oracle, aps expert HTML, CSS et tutti quanti :mouarf:
Voilà mon problème, j'ai un blog http://photosyukio.canalblog.com/ sur lequel j'avais une radio blog.
Le problème est que la techno flash disparaissant, ce lecteur n'est plus reconnu.
OK, après avoir fait des recherches sur le Net j'ai récupéré du code où j'arrive à insérer un lecteur MP3 MAIS, manque de chance, il me faut un lien par morceau de musique :(
Est-il possible d'avoir un lecteur MP3, incluant une liste de morceaux (les dix premiers visibles avec ascenseur) et, cerise sur le gâteau, juste donner le nom du répertoire qui renferme mes 100 morceaux sans avoir à les lister un par un...
Voilà :-)
Par avance un GROS GROS merci si vous pouvez m'aider!
Je mets le code de la page d'accueil du blog.
Code:
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> |
