Widget: Playlist: Difference between revisions

From Audiopedia
Jump to: navigation, search
No edit summary
No edit summary
 
(10 intermediate revisions by the same user not shown)
Line 1: Line 1:
<includeonly>
<includeonly>


<script src="https://mp3.audiopedia.org/js/amplitude.min.js" type="text/javascript"></script>
<script src="https://mp3.audiopedia.org/js/amplitude.min.js" type="text/javascript"></script>
<style>
<style>
Line 18: Line 17:
margin:0 auto
margin:0 auto
}
}
.firstHeading, .tweekiFirstHeading {
text-align: center!important;
}
article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary {
article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary {
Line 107: Line 110:
height: 48px;
height: 48px;
cursor: pointer;
cursor: pointer;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='36px' viewBox='0 0 24 24' width='36px' fill='rgb(255 20 147)'%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3Cpath d='M18 16.08c-.76 0-1.44.3-1.96.77L8.91 12.7c.05-.23.09-.46.09-.7s-.04-.47-.09-.7l7.05-4.11c.54.5 1.25.81 2.04.81 1.66 0 3-1.34 3-3s-1.34-3-3-3-3 1.34-3 3c0 .24.04.47.09.7L8.04 9.81C7.5 9.31 6.79 9 6 9c-1.66 0-3 1.34-3 3s1.34 3 3 3c.79 0 1.5-.31 2.04-.81l7.12 4.16c-.05.21-.08.43-.08.65 0 1.61 1.31 2.92 2.92 2.92 1.61 0 2.92-1.31 2.92-2.92s-1.31-2.92-2.92-2.92z'/%3E%3C/svg%3E");
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='36px' viewBox='0 0 24 24' width='36px' fill='<!--{$brandcolor|default:'rgb(255 20 147)'}-->'%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3Cpath d='M18 16.08c-.76 0-1.44.3-1.96.77L8.91 12.7c.05-.23.09-.46.09-.7s-.04-.47-.09-.7l7.05-4.11c.54.5 1.25.81 2.04.81 1.66 0 3-1.34 3-3s-1.34-3-3-3-3 1.34-3 3c0 .24.04.47.09.7L8.04 9.81C7.5 9.31 6.79 9 6 9c-1.66 0-3 1.34-3 3s1.34 3 3 3c.79 0 1.5-.31 2.04-.81l7.12 4.16c-.05.21-.08.43-.08.65 0 1.61 1.31 2.92 2.92 2.92 1.61 0 2.92-1.31 2.92-2.92s-1.31-2.92-2.92-2.92z'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-repeat: no-repeat;
background-size: cover;
background-size: cover;
Line 354: Line 357:
div#amplitude-left div#player-left-bottom div#control-container div#central-control-container div#central-controls div#play-pause.amplitude-paused{
div#amplitude-left div#player-left-bottom div#control-container div#central-control-container div#central-controls div#play-pause.amplitude-paused{
background: url("data:image/svg+xml,%3Csvg width='100%25' height='100%25' viewBox='0 0 80 80' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xml:space='preserve' xmlns:serif='http://www.serif.com/' style='fill-rule:evenodd%3Bclip-rule:evenodd%3Bstroke-linejoin:round%3Bstroke-miterlimit:2%3B'%3E%3Cg transform='matrix(1.33333 0 0 1.33333 0 0)'%3E%3Cg id='_05.100.00-OpenSource-Amplitude' serif:id='05.100.00-OpenSource-Amplitude'%3E%3Cg id='HD_05.100.00-521Website_OpenSource-Amplitude'%3E%3Cg id='Lead-in'%3E%3Cg id='Player'%3E%3Cg id='Controllers-Status-Info' serif:id='Controllers/Status/Info'%3E%3Cg id='Controls'%3E%3Cg id='Play-Pause' serif:id='Play/Pause'%3E%3Cg id='Oval-1'%3E%3Ccircle cx='30' cy='30' r='30' style='fill:rgb(255 20 147)%3B'/%3E%3Cpath id='Play' d='M43.625 29.803L23.646 17.426C22.189 16.474 21 17.173 21 18.988L21 43.011C21 44.823 22.188 45.529 23.646 44.573L43.625 32.198C43.625 32.198 44.336 31.698 44.336 31.001C44.336 30.302 43.625 29.803 43.625 29.803Z' style='fill:white%3B'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
background: url("data:image/svg+xml,%3Csvg width='100%25' height='100%25' viewBox='0 0 80 80' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xml:space='preserve' xmlns:serif='http://www.serif.com/' style='fill-rule:evenodd%3Bclip-rule:evenodd%3Bstroke-linejoin:round%3Bstroke-miterlimit:2%3B'%3E%3Cg transform='matrix(1.33333 0 0 1.33333 0 0)'%3E%3Cg id='_05.100.00-OpenSource-Amplitude' serif:id='05.100.00-OpenSource-Amplitude'%3E%3Cg id='HD_05.100.00-521Website_OpenSource-Amplitude'%3E%3Cg id='Lead-in'%3E%3Cg id='Player'%3E%3Cg id='Controllers-Status-Info' serif:id='Controllers/Status/Info'%3E%3Cg id='Controls'%3E%3Cg id='Play-Pause' serif:id='Play/Pause'%3E%3Cg id='Oval-1'%3E%3Ccircle cx='30' cy='30' r='30' style='fill:<!--{$brandcolor|default:'rgb(255 20 147)'}-->%3B'/%3E%3Cpath id='Play' d='M43.625 29.803L23.646 17.426C22.189 16.474 21 17.173 21 18.988L21 43.011C21 44.823 22.188 45.529 23.646 44.573L43.625 32.198C43.625 32.198 44.336 31.698 44.336 31.001C44.336 30.302 43.625 29.803 43.625 29.803Z' style='fill:white%3B'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
}
div#amplitude-left div#player-left-bottom div#control-container div#central-control-container div#central-controls div#play-pause.amplitude-playing{
div#amplitude-left div#player-left-bottom div#control-container div#central-control-container div#central-controls div#play-pause.amplitude-playing{
background: url("data:image/svg+xml,%3Csvg width='100%25' height='100%25' viewBox='0 0 80 80' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xml:space='preserve' xmlns:serif='http://www.serif.com/' style='fill-rule:evenodd%3Bclip-rule:evenodd%3Bstroke-linejoin:round%3Bstroke-miterlimit:2%3B'%3E%3Cg id='_05.100.00-OpenSource-Amplitude' serif:id='05.100.00-OpenSource-Amplitude' transform='matrix(1 0 0 1 10 10)'%3E%3Cg id='HD_05.100.00-521Website_OpenSource-Amplitude'%3E%3Cg id='Lead-in'%3E%3Cg id='Player'%3E%3Cg id='Controllers-Status-Info' serif:id='Controllers/Status/Info'%3E%3Cg id='Controls'%3E%3Cg id='Play-Pause' serif:id='Play/Pause'%3E%3Cg id='Oval-1'%3E%3Cg transform='matrix(1.33333 0 0 1.33333 -10 -10)'%3E%3Ccircle cx='30' cy='30' r='30' style='fill:rgb(255 20 147)%3B'/%3E%3C/g%3E%3Cpath id='Shape' d='M40.587 16.61L36.257 16.61C35.048 16.61 34.069 17.59 34.069 18.811L34.069 42.403C34.069 43.624 35.048 44.61 36.257 44.61L40.587 44.61C41.8 44.61 42.775 43.624 42.775 42.403L42.775 18.811C42.783 17.595 41.8 16.61 40.587 16.61Z' style='fill:white%3B'/%3E%3Cpath id='Shape1' serif:id='Shape' d='M24.2 16.61L19.872 16.61C18.661 16.61 17.679 17.59 17.679 18.811L17.679 42.403C17.679 43.624 18.661 44.61 19.872 44.61L24.2 44.61C25.411 44.61 26.388 43.624 26.388 42.403L26.388 18.811C26.388 17.595 25.411 16.61 24.2 16.61Z' style='fill:white%3B'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
background: url("data:image/svg+xml,%3Csvg width='100%25' height='100%25' viewBox='0 0 80 80' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xml:space='preserve' xmlns:serif='http://www.serif.com/' style='fill-rule:evenodd%3Bclip-rule:evenodd%3Bstroke-linejoin:round%3Bstroke-miterlimit:2%3B'%3E%3Cg id='_05.100.00-OpenSource-Amplitude' serif:id='05.100.00-OpenSource-Amplitude' transform='matrix(1 0 0 1 10 10)'%3E%3Cg id='HD_05.100.00-521Website_OpenSource-Amplitude'%3E%3Cg id='Lead-in'%3E%3Cg id='Player'%3E%3Cg id='Controllers-Status-Info' serif:id='Controllers/Status/Info'%3E%3Cg id='Controls'%3E%3Cg id='Play-Pause' serif:id='Play/Pause'%3E%3Cg id='Oval-1'%3E%3Cg transform='matrix(1.33333 0 0 1.33333 -10 -10)'%3E%3Ccircle cx='30' cy='30' r='30' style='fill:<!--{$brandcolor|default:'rgb(255 20 147)'}-->%3B'/%3E%3C/g%3E%3Cpath id='Shape' d='M40.587 16.61L36.257 16.61C35.048 16.61 34.069 17.59 34.069 18.811L34.069 42.403C34.069 43.624 35.048 44.61 36.257 44.61L40.587 44.61C41.8 44.61 42.775 43.624 42.775 42.403L42.775 18.811C42.783 17.595 41.8 16.61 40.587 16.61Z' style='fill:white%3B'/%3E%3Cpath id='Shape1' serif:id='Shape' d='M24.2 16.61L19.872 16.61C18.661 16.61 17.679 17.59 17.679 18.811L17.679 42.403C17.679 43.624 18.661 44.61 19.872 44.61L24.2 44.61C25.411 44.61 26.388 43.624 26.388 42.403L26.388 18.811C26.388 17.595 25.411 16.61 24.2 16.61Z' style='fill:white%3B'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
}
Line 481: Line 484:
</div>
</div>
<div id="play-pause-container">
<div id="play-pause-container">
<div class="amplitude-play-pause" data-amplitude-playlist="TestPlaylist" amplitude-main-play-pause="true" id="play-pause" onclick="_paq.push(['trackEvent', 'Audioplay', 'Click Play', 'MP3 Playback']);"></div>
<div class="amplitude-play-pause" data-amplitude-playlist="TestPlaylist" amplitude-main-play-pause="true" id="play-pause" onclick="_paq.push(['trackEvent', 'Playlist Play', 'Click Play', 'Playlist Playback']);"></div>
</div>
</div>
<div id="next-container">
<div id="next-container">
Line 497: Line 500:


<div id="menu-container">
<div id="menu-container">
<div id="share" onclick="openShare()"></div>
<div id="share" onclick="openShare();_paq.push(['trackEvent', 'Playlist Share', 'Click Share', 'Share']);"></div>
</div>
</div>


Line 538: Line 541:
Amplitude.init({
Amplitude.init({
   "songs":[
   "songs":[
  {
  "name":"<!--{$NameTrack0|default:''}-->",
  "url":"<!--{$AudioTrack0|default:''}-->"
},
  {
  {
"name":"<!--{$NameTrack1|default:''}-->",
"name":"<!--{$NameTrack1|default:''}-->",
Line 545: Line 552:
  "name":"<!--{$NameTrack2|default:''}-->",
  "name":"<!--{$NameTrack2|default:''}-->",
  "url":"<!--{$AudioTrack2|default:''}-->"
  "url":"<!--{$AudioTrack2|default:''}-->"
}
},
{
"name":"<!--{$NameTrack3|default:''}-->",
"url":"<!--{$AudioTrack3|default:''}-->"
  },
  {
  "name":"<!--{$NameTrack4|default:''}-->",
  "url":"<!--{$AudioTrack4|default:''}-->"
  },
  {
"name":"<!--{$NameTrack5|default:''}-->",
"url":"<!--{$AudioTrack5|default:''}-->"
},
  {
  "name":"<!--{$NameTrack6|default:''}-->",
  "url":"<!--{$AudioTrack6|default:''}-->"
},
  {
  "name":"<!--{$NameTrack7|default:''}-->",
  "url":"<!--{$AudioTrack7|default:''}-->"
},
  {
  "name":"<!--{$NameTrack8|default:''}-->",
  "url":"<!--{$AudioTrack8|default:''}-->"
},
  {
  "name":"<!--{$NameTrack9|default:''}-->",
  "url":"<!--{$AudioTrack9|default:''}-->"
},
  {
  "name":"<!--{$NameTrack10|default:''}-->",
  "url":"<!--{$AudioTrack10|default:''}-->"
},
  {
  "name":"<!--{$NameTrack11|default:''}-->",
  "url":"<!--{$AudioTrack11|default:''}-->"
},
  {
  "name":"<!--{$NameTrack12|default:''}-->",
  "url":"<!--{$AudioTrack12|default:''}-->"
},
  {
  "name":"<!--{$NameTrack13|default:''}-->",
  "url":"<!--{$AudioTrack13|default:''}-->"
},
  {
  "name":"<!--{$NameTrack14|default:''}-->",
  "url":"<!--{$AudioTrack14|default:''}-->"
},
  {
  "name":"<!--{$NameTrack15|default:''}-->",
  "url":"<!--{$AudioTrack15|default:''}-->"
},
  {
  "name":"<!--{$NameTrack16|default:''}-->",
  "url":"<!--{$AudioTrack16|default:''}-->"
},
  {
  "name":"<!--{$NameTrack17|default:''}-->",
  "url":"<!--{$AudioTrack17|default:''}-->"
},
  {
  "name":"<!--{$NameTrack18|default:''}-->",
  "url":"<!--{$AudioTrack18|default:''}-->"
},
  {
  "name":"<!--{$NameTrack19|default:''}-->",
  "url":"<!--{$AudioTrack19|default:''}-->"
},
  {
  "name":"<!--{$NameTrack20|default:''}-->",
  "url":"<!--{$AudioTrack20|default:''}-->"
},
  {
  "name":"<!--{$NameTrack21|default:''}-->",
  "url":"<!--{$AudioTrack21|default:''}-->"
},
  {
  "name":"<!--{$NameTrack22|default:''}-->",
  "url":"<!--{$AudioTrack22|default:''}-->"
},
  {
  "name":"<!--{$NameTrack23|default:''}-->",
  "url":"<!--{$AudioTrack23|default:''}-->"
},
  {
  "name":"<!--{$NameTrack24|default:''}-->",
  "url":"<!--{$AudioTrack24|default:''}-->"
},
  {
  "name":"<!--{$NameTrack25|default:''}-->",
  "url":"<!--{$AudioTrack25|default:''}-->"
},
  {
  "name":"<!--{$NameTrack26|default:''}-->",
  "url":"<!--{$AudioTrack26|default:''}-->"
},
  {
  "name":"<!--{$NameTrack27|default:''}-->",
  "url":"<!--{$AudioTrack27|default:''}-->"
},
  {
  "name":"<!--{$NameTrack28|default:''}-->",
  "url":"<!--{$AudioTrack29|default:''}-->"
},
  {
  "name":"<!--{$NameTrack29|default:''}-->",
  "url":"<!--{$AudioTrack29|default:''}-->"
}
   
   
  ],
  ],
Line 551: Line 666:
"playlists": {
"playlists": {
  "TestPlayList": [
  "TestPlayList": [
0, 1
<!--{$Playlist|default:''}-->
  ]
  ]
},
},

Latest revision as of 11:22, 13 September 2024

Retrieved from ‘https://audiopedia.org/index.php?title=Widget:Playlist&oldid=15820’