Помощь Как вставить скрипт аудиоплеера Amplitude.JS в Joomla статью?

Marinika · 10 Авг 2020

Как вставить аудиоплеер с плейлистом с помощью скрипта Amplitude.JS в Joomla статью?
Страница скрипта Amplitude.JS: Для просмотра ссылки Войди или Зарегистрируйся

SuperDonClumsy · 10 Авг 2020

Если в вашем шаблоне есть возможность ввести собственный код. Затем поместите это туда:

Код:

<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/amplitudejs@{{version-number}}/dist/amplitude.js"></script>

Если шаблон не может этого сделать, вы также можете использовать такой плагин

Для просмотра ссылки Войди или Зарегистрируйся

Затем в посте вы работаете со следующими элементами:

Для просмотра ссылки Войди или Зарегистрируйся

Обратите внимание, что редактор, возможно, придется переключить на HTML и отключить очистку кода. при необходимости в плагине для вашего редактора, в противном случае установите параметр «текстовый фильтр» на отсутствие фильтрации для суперпользователя.

Если у вас есть проблемы с этим, вы также можете использовать это:

Для просмотра ссылки Войди или Зарегистрируйся

Marinika · 11 Авг 2020

Но как вставить это я всё знаю.
Я не знаю какой код надо вставить, чтобы отображался плеер с плейлистом.
В документации нет конкретного примера-образца вставляемого кода плеера и плеера с плейлистом.

SuperDonClumsy · 11 Авг 2020

Marinika написал(а):
Но как вставить это я всё знаю.
Я не знаю какой код надо вставить, чтобы отображался плеер с плейлистом.
В документации нет конкретного примера-образца вставляемого кода плеера и плеера с плейлистом.

Извините, я неправильно понял

Для просмотра ссылки Войди или Зарегистрируйся

Код:

Global: class="amplitude-{element}"
Playlist: class="amplitude-{element}" data-amplitude-playlist="{playlist}"
Song: class="amplitude-{element}" data-amplitude-song-index="{song}"
Song In Playlist: class="amplitude-{element}" data-amplitude-song-index="{song}" data-amplitude-playlist="{playlist}"

Marinika · 11 Авг 2020

class="amplitude-{element}" data-amplitude-playlist="{playlist}"
Это лишь отрывок кода. Если я просто вставлю эту строчку в редактор, то ничего не отобразится.
Нужен образец полного кода для вставки в Joomla-статью, чтобы отображался плеер с плейлистом.
Не понятно как и где вписать список песен для плейлиста.

SuperDonClumsy · 11 Авг 2020

Marinika написал(а):
class="amplitude-{element}" data-amplitude-playlist="{playlist}"
Это лишь отрывок кода. Если я просто вставлю эту строчку в редактор, то ничего не отобразится.
Нужен образец полного кода для вставки в Joomla-статью, чтобы отображался плеер с плейлистом.
Не понятно как и где вписать список песен для плейлиста.

Это класс. Конечно, вы должны добавить элемент. <span> или <div>

Код:

<span class="amplitude-{element}" data-amplitude-playlist="{playlist}"></span>

amplitude-{element}: самоназначенное имя элемента (для css)
{playlist}: Название вашего плейлиста

Структура как здесь:
Для просмотра ссылки Войди или Зарегистрируйся

Перед этим, конечно же, нужно создать плейлист:
Для просмотра ссылки Войди или Зарегистрируйся

Marinika · 11 Авг 2020

В файл index.php шаблона после <head> добавила строчку:
<script type="text/javascript" src="Для просмотра ссылки Войди или Зарегистрируйся"></script>

В html-код статьи (при выключенном текстовом редакторе) добавила следующий код:

Код:

<script>

let bandcampLinks = document.getElementsByClassName('bandcamp-link');

for( var i = 0; i < bandcampLinks.length; i++ ){
  bandcampLinks[i].addEventListener('click', function(e){
  e.stopPropagation();
  });
}

let songElements = document.getElementsByClassName('song');

for( var i = 0; i < songElements.length; i++ ){
  /*
  Ensure that on mouseover, CSS styles don't get messed up for active songs.
  */
  songElements[i].addEventListener('mouseover', function(){
  this.style.backgroundColor = '#00A0FF';

  this.querySelectorAll('.song-meta-data .song-title')[0].style.color = '#FFFFFF';
  this.querySelectorAll('.song-meta-data .song-artist')[0].style.color = '#FFFFFF';

  if( !this.classList.contains('amplitude-active-song-container') ){
  this.querySelectorAll('.play-button-container')[0].style.display = 'block';
  }

  this.querySelectorAll('img.bandcamp-grey')[0].style.display = 'none';
  this.querySelectorAll('img.bandcamp-white')[0].style.display = 'block';
  this.querySelectorAll('.song-duration')[0].style.color = '#FFFFFF';
  });

  /*
  Ensure that on mouseout, CSS styles don't get messed up for active songs.
  */
  songElements[i].addEventListener('mouseout', function(){
  this.style.backgroundColor = '#FFFFFF';
  this.querySelectorAll('.song-meta-data .song-title')[0].style.color = '#272726';
  this.querySelectorAll('.song-meta-data .song-artist')[0].style.color = '#607D8B';
  this.querySelectorAll('.play-button-container')[0].style.display = 'none';
  this.querySelectorAll('img.bandcamp-grey')[0].style.display = 'block';
  this.querySelectorAll('img.bandcamp-white')[0].style.display = 'none';
  this.querySelectorAll('.song-duration')[0].style.color = '#607D8B';
  });

  /*
  Show and hide the play button container on the song when the song is clicked.
  */
  songElements[i].addEventListener('click', function(){
  this.querySelectorAll('.play-button-container')[0].style.display = 'none';
  });
}

/*
  Initializes AmplitudeJS
*/
Amplitude.init({
  "songs": [
  {
  "name": "Risin' High (feat Raashan Ahmad)",
  "artist": "Ancient Astronauts",
  "album": "We Are to Answer",
  "url": "https://521dimensions.com/song/Ancient Astronauts - Risin' High (feat Raashan Ahmad).mp3",
  "cover_art_url": "https://521dimensions.com/img/open-source/amplitudejs/album-art/we-are-to-answer.jpg"
  },
  {
  "name": "The Gun",
  "artist": "Lorn",
  "album": "Ask The Dust",
  "url": "https://521dimensions.com/song/08 The Gun.mp3",
  "cover_art_url": "https://521dimensions.com/img/open-source/amplitudejs/album-art/ask-the-dust.jpg"
  },
  {
  "name": "Anvil",
  "artist": "Lorn",
  "album": "Anvil",
  "url": "https://521dimensions.com/song/LORN - ANVIL.mp3",
  "cover_art_url": "https://521dimensions.com/img/open-source/amplitudejs/album-art/anvil.jpg"
  },
  {
  "name": "I Came Running",
  "artist": "Ancient Astronauts",
  "album": "We Are to Answer",
  "url": "https://521dimensions.com/song/ICameRunning-AncientAstronauts.mp3",
  "cover_art_url": "https://521dimensions.com/img/open-source/amplitudejs/album-art/we-are-to-answer.jpg"
  },
  {
  "name": "First Snow",
  "artist": "Emancipator",
  "album": "Soon It Will Be Cold Enough",
  "url": "https://521dimensions.com/song/FirstSnow-Emancipator.mp3",
  "cover_art_url": "https://521dimensions.com/img/open-source/amplitudejs/album-art/soon-it-will-be-cold-enough.jpg"
  },
  {
  "name": "Terrain",
  "artist": "pg.lost",
  "album": "Key",
  "url": "https://521dimensions.com/song/Terrain-pglost.mp3",
  "cover_art_url": "https://521dimensions.com/img/open-source/amplitudejs/album-art/key.jpg"
  },
  {
  "name": "Vorel",
  "artist": "Russian Circles",
  "album": "Guidance",
  "url": "https://521dimensions.com/song/Vorel-RussianCircles.mp3",
  "cover_art_url": "https://521dimensions.com/img/open-source/amplitudejs/album-art/guidance.jpg"
  },
  {
  "name": "Intro / Sweet Glory",
  "artist": "Jimkata",
  "album": "Die Digital",
  "url": "https://521dimensions.com/song/IntroSweetGlory-Jimkata.mp3",
  "cover_art_url": "https://521dimensions.com/img/open-source/amplitudejs/album-art/die-digital.jpg"
  },
  {
  "name": "Offcut #6",
  "artist": "Little People",
  "album": "We Are But Hunks of Wood Remixes",
  "url": "https://521dimensions.com/song/Offcut6-LittlePeople.mp3",
  "cover_art_url": "https://521dimensions.com/img/open-source/amplitudejs/album-art/we-are-but-hunks-of-wood.jpg"
  },
  {
  "name": "Dusk To Dawn",
  "artist": "Emancipator",
  "album": "Dusk To Dawn",
  "url": "https://521dimensions.com/song/DuskToDawn-Emancipator.mp3",
  "cover_art_url": "https://521dimensions.com/img/open-source/amplitudejs/album-art/from-dusk-to-dawn.jpg"
  },
  {
  "name": "Anthem",
  "artist": "Emancipator",
  "album": "Soon It Will Be Cold Enough",
  "url": "https://521dimensions.com/song/Anthem-Emancipator.mp3",
  "cover_art_url": "https://521dimensions.com/img/open-source/amplitudejs/album-art/soon-it-will-be-cold-enough.jpg"
  }
  ],
  "callbacks": {
  'play': function(){
  document.getElementById('album-art').style.visibility = 'hidden';
  document.getElementById('large-visualization').style.visibility = 'visible';
  },

  'pause': function(){
  document.getElementById('album-art').style.visibility = 'visible';
  document.getElementById('large-visualization').style.visibility = 'hidden';
  }
  },
  waveforms: {
  sample_rate: 50
  }
});
document.getElementById('large-visualization').style.height = document.getElementById('album-art').offsetWidth + 'px';

</script>

Но ничего не отображается. Код рабочий, скопирован с Для просмотра ссылки Войди или Зарегистрируйся.
Что не так?
Видимо надо ещё сделать вывод плеера. Но как?

mumins · 11 Авг 2020

Marinika написал(а):
Но ничего не отображается. Код рабочий, скопирован с Для просмотра ссылки Войди или Зарегистрируйся.
Сss тоже добавила в шаблон.
Что не так?

Смотрите в source страницы - не сожрал ли editor <script> ... </script>
Таки sourcerer придется пользовать :/ Или у JCE можно allowed tags добавить, но неуверен работает это с js.
P.S.
Таки да - работает Для просмотра ссылки Войди или Зарегистрируйся

Marinika · 11 Авг 2020

Редактор полностью отключен: Без редактора. <script> и </script> сохранились и есть в исходном коде страницы.
Попробовала вставить другие скрипты. Они работают. Значит дело не в редакторе.
Видимо я не вставила код вывода самого плеера. Я не знаю как.

SuperDonClumsy · 11 Авг 2020

Код:

<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/amplitudejs@latest/dist/amplitude.min.js"></script>
<style>/*   1. Base */ /*   2. Components */ div.player {   border: 1px solid #eaeaea;   margin-bottom: 20px;   max-width: 750px;   margin: auto;   margin-top: 40px; }   div.player:after {     content: "";     display: table;     clear: both; }   div.player img.album-art {     width: 245px;     height: 245px;     float: left; } /*   Small only */ @media screen and (max-width: 39.9375em) {   div.player img.album-art {     width: 100%;     height: auto; } } /*   Medium only */ /*   Large Only */ div.meta-container {   float: left;   width: calc(100% - 270px);   padding: 10px; }   div.meta-container div.song-title {     text-align: center;     color: #263238;     font-size: 30px;     font-weight: 600;     font-family: "Open Sans", sans-serif; }   div.meta-container div.song-artist {     text-align: center;     font-family: "Open Sans", sans-serif;     font-size: 16px;     color: #263238;     margin-top: 10px; }   div.meta-container div.time-container {     font-family: Helvetica;     font-size: 18px;     color: #000;     margin-bottom: 10px; }     div.meta-container div.time-container:after {       content: "";       display: table;       clear: both; }     div.meta-container div.time-container div.current-time {       float: left; }     div.meta-container div.time-container div.duration {       float: right; } /*   Small only */ @media screen and (max-width: 39.9375em) {   div.meta-container {     width: 100%; } } /*   Medium only */ /*   Large Only */ div.control-container {   text-align: center;   margin-top: 40px; }   div.control-container div.amplitude-prev {     width: 28px;     height: 24px;     cursor: pointer;     background: url("https://521dimensions.com/img/open-source/amplitudejs/examples/multiple-songs/previous.svg");     display: inline-block;     vertical-align: middle; }   div.control-container div.amplitude-play-pause {     width: 40px;     height: 44px;     cursor: pointer;     display: inline-block;     vertical-align: middle; }     div.control-container div.amplitude-play-pause.amplitude-paused {       background: url("https://521dimensions.com/img/open-source/amplitudejs/examples/multiple-songs/play.svg"); }     div.control-container div.amplitude-play-pause.amplitude-playing {       background: url("https://521dimensions.com/img/open-source/amplitudejs/examples/multiple-songs/pause.svg"); }   div.control-container div.amplitude-next {     width: 28px;     height: 24px;     cursor: pointer;     background: url("https://521dimensions.com/img/open-source/amplitudejs/examples/multiple-songs/next.svg");     display: inline-block;     vertical-align: middle; } /*   Small only */ @media screen and (max-width: 39.9375em) {   div.control-container div.amplitude-prev {     margin-right: 75px; }   div.control-container div.amplitude-next {     margin-left: 75px; } } /*   Medium only */ @media screen and (min-width: 40em) and (max-width: 63.9375em) {   div.control-container div.amplitude-prev {     margin-right: 40px; }   div.control-container div.amplitude-next {     margin-left: 40px; } } /*   Large Only */ @media screen and (min-width: 64em) {   div.control-container div.amplitude-prev {     margin-right: 75px; }   div.control-container div.amplitude-next {     margin-left: 75px; } } progress.amplitude-song-played-progress:not([value]) {   background-color: #313252; } progress.amplitude-song-played-progress {   background-color: #d7dee3;   -webkit-appearance: none;   -moz-appearance: none;   appearance: none;   width: 100%;   height: 5px;   display: block;   cursor: pointer;   border-radius: 3px;   height: 8px;   border: none; } progress[value]::-webkit-progress-bar {   background-color: #d7dee3;   border-radius: 3px; } progress[value]::-moz-progress-bar {   background-color: #00a0ff;   border-radius: 3px; } progress[value]::-webkit-progress-value {   background-color: #00a0ff;   border-radius: 3px; } /*   3. Layout */ body {   background-color: #FFFFFF;   -webkit-font-smoothing: antialiased;   padding: 20px; }   body div#preload {     display: none; } /*   4. Pages */ /*   5. Themes */ /*   6. Utils */ /*   7. Vendors */ /*# sourceMappingURL=app.css.map */
</style>  
<div class="player">    
    <img src="https://521dimensions.com/img/open-source/amplitudejs/album-art/we-are-but-hunks-of-wood.jpg" class="album-art"/>    
    <div class="meta-container">      
        <div class="song-title">Offcut #6
        </div>      
        <div class="song-artist">Little People
        </div>      
        <div class="time-container">        
            <div class="current-time">          
                <span class="amplitude-current-minutes" data-amplitude-song-index="0">
                </span>:
                <span class="amplitude-current-seconds" data-amplitude-song-index="0">
                </span>        
            </div>        
            <div class="duration">          
                <span class="amplitude-duration-minutes" data-amplitude-song-index="0">3
                </span>:
                <span class="amplitude-duration-seconds" data-amplitude-song-index="0">30
                </span>        
            </div>      
        </div>      
        <progress class="amplitude-song-played-progress" data-amplitude-song-index="0" id="song-played-progress-1">
        </progress>      
        <div class="control-container">        
            <div class="amplitude-prev">        
            </div>        
            <div class="amplitude-play-pause" data-amplitude-song-index="0">        
            </div>        
            <div class="amplitude-next">        
            </div>      
        </div>    
    </div>  
</div>  
<div class="player">    
    <img src="https://521dimensions.com/img/open-source/amplitudejs/album-art/from-dusk-to-dawn.jpg" class="album-art"/>    
    <div class="meta-container">      
        <div class="song-title">Dusk To Dawn
        </div>      
        <div class="song-artist">Emancipator
        </div>      
        <div class="time-container">        
            <div class="current-time">          
                <span class="amplitude-current-minutes" data-amplitude-song-index="1">
                </span>:
                <span class="amplitude-current-seconds" data-amplitude-song-index="1">
                </span>        
            </div>        
            <div class="duration">          
                <span class="amplitude-duration-minutes" data-amplitude-song-index="1">03
                </span>:
                <span class="amplitude-duration-seconds" data-amplitude-song-index="1">16
                </span>        
            </div>      
        </div>      
        <progress class="amplitude-song-played-progress" data-amplitude-song-index="1" id="song-played-progress-2">
        </progress>      
        <div class="control-container">        
            <div class="amplitude-prev">        
            </div>        
            <div class="amplitude-play-pause" data-amplitude-song-index="1">        
            </div>        
            <div class="amplitude-next">        
            </div>      
        </div>    
    </div>  
</div>  
<div id="preload">    
    <img src="https://521dimensions.com/img/open-source/amplitudejs/examples/multiple-songs/previous.svg"/>    
    <img src="https://521dimensions.com/img/open-source/amplitudejs/examples/multiple-songs/play.svg"/>    
    <img src="https://521dimensions.com/img/open-source/amplitudejs/examples/multiple-songs/pause.svg"/>    
    <img src="https://521dimensions.com/img/open-source/amplitudejs/examples/multiple-songs/next.svg"/>  
</div>
<script>Amplitude.init({
  "songs": [
    {
      "name": "Offcut #6",
      "artist": "Little People",
      "album": "We Are But Hunks of Wood Remixes",
      "url": "https://521dimensions.com/song/Offcut6-LittlePeople.mp3",
      "cover_art_url": "https://521dimensions.com/img/open-source/amplitudejs/album-art/we-are-but-hunks-of-wood.jpg"
    },
    {
      "name": "Dusk To Dawn",
      "artist": "Emancipator",
      "album": "Dusk To Dawn",
      "url": "https://521dimensions.com/song/DuskToDawn-Emancipator.mp3",
      "cover_art_url": "https://521dimensions.com/img/open-source/amplitudejs/album-art/from-dusk-to-dawn.jpg"
    }
  ]
});
document.getElementById('song-played-progress-1').addEventListener('click', function( e ){
  if( Amplitude.getActiveIndex() == 0 ){
    var offset = this.getBoundingClientRect();
    var x = e.pageX - offset.left;
    Amplitude.setSongPlayedPercentage( ( parseFloat( x ) / parseFloat( this.offsetWidth) ) * 100 );
  }
});
document.getElementById('song-played-progress-2').addEventListener('click', function( e ){
  if( Amplitude.getActiveIndex() == 1 ){
    var offset = this.getBoundingClientRect();
    var x = e.pageX - offset.left;
    Amplitude.setSongPlayedPercentage( ( parseFloat( x ) / parseFloat( this.offsetWidth) ) * 100 );
  }
});
</script>

работает

Помощь Как вставить скрипт аудиоплеера Amplitude.JS в Joomla статью?

Marinika

Хранитель порядка

SuperDonClumsy

отшельник

Marinika

Хранитель порядка

SuperDonClumsy

отшельник

Marinika

Хранитель порядка

SuperDonClumsy

отшельник

Marinika

Хранитель порядка

mumins

Интернетов сантехник

Marinika

Хранитель порядка

SuperDonClumsy

отшельник