XF 2.1 Радио виждетом

levj3 · 17 Сен 2019

Добрый вечер, переискал весь форум и не смог найти, как правильно установить радио в виджет. Радио не появлялось, либо вообще не работало. Не могли бы помочь с этой проблемой?

IlyaPep · 17 Сен 2019

Дайте код от вашего радио, и опишите как ставили. Ибо или код плохой, или не туда вставляли ?

levj3 · 17 Сен 2019

Переискал форумы и нашел какой-то код, переделав его, начал работать. Теперь задаюсь вопросом, как добавить в него плеер так, чтобы он не выходил из сайдбара? Сам код и скриншот:

HTML:

<div class="block-container" style="text-align:center;">
    <a href="поток" onclick="window.open('','popup','width=245,height=65,top=200,left=150,toolbar=0,location=0,directories=0,status=0,menubar=0,scrollbars=0,resizable=0')" target="popup"><tooltip title="Название радио"><img src="картинка" max-width="32px" height="32px">
    </tooltip></a>
</div>

Или помогите фиксануть этот код. ☺

HTML:

<center> <!-- BEGINS: AUTO-GENERATED MUSES RADIO PLAYER CODE -->
<script type="text/javascript" src="ссылка js"></script>
<script type="text/javascript">
MRP.insert({
'url':'поток',
'codec':'mp3',
'volume':80,
'autoplay':false,
'buffering':5,
'title':'Название',
'welcome':'Сделай погромче!',
'wmode':'transparent',
'skin':'darkconsole',
'width':200,
'height':62
});
</script>
<!-- ENDS: AUTO-GENERATED MUSES RADIO PLAYER CODE --></center>

Skaiman · 17 Сен 2019

Интересный код, жаль бороться с ним некому сегодня :)

Попробуй так:

HTML:

<div class="audio-play">
  <a id="play-pause-button" class="fa fa-play"></a>
</div>

CSS:

.audio-play {
    display: block;
    position: relative;
    background: url(https://i4.imageban.ru/out/2019/07/11/3834eda42eb29fa74b7e8a981db8d7d7.jpg);
    background-size: cover;
    width: 250px;
    height: 250px;
    border: 1px solid #ccc;
}

#play-pause-button{
  font-size: 50px;
  color: rgba(231,44,49,.8);
  cursor: pointer;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}

JavaScript:

var audio = new Audio("https://rusradio.hostingradio.ru/rusradio96.aacp");

$('#play-pause-button').on("click",function(){
  if($(this).hasClass('fa-play'))
   {
     $(this).removeClass('fa-play');
     $(this).addClass('fa-pause');
     audio.play();
   }
  else
   {
     $(this).removeClass('fa-pause');
     $(this).addClass('fa-play');
     audio.pause();
   }
});

audio.onended = function() {
     $("#play-pause-button").removeClass('fa-pause');
     $("#play-pause-button").addClass('fa-play');
};

levj3 · 17 Сен 2019

Куда вписывать Java?

Skaiman · 17 Сен 2019

Ну можно все сунуть в виджет. Просто это радио не будет открываться в новом окне. Как бы сделать можно и по другому, для открытия window.open, по сути плеер для потока, простой html5 audio, для открытия в окне надо его сделать на странице, даже не обязательно страница ксена, просто html страничка и тогда

HTML:

<div class="block-container" style="text-align:center;">
    <a onclick="window.open('страница', 'radio', 'width=240, height=300, status=no, resizable=no, top=10, left=10');return false;" href="страница" target="_blank"><img src="картинка" width="32" height="32"></a>
</div>

Тот же плеер, что дал выше, сделать на странице, а кнопка из этого поста в виджет

Создаешь папку в корне форума radio, в ней файл radio.html с содержимым:

HTML:

<!DOCTYPE html>
<html>

<head>
    <title>Наше радио</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <style>
        .audio-play {
            display: block;
            position: relative;
            background: url(https://i4.imageban.ru/out/2019/07/11/3834eda42eb29fa74b7e8a981db8d7d7.jpg);
            background-size: cover;
            width: 250px;
            height: 250px;
            border: 1px solid #ccc;
        }

        #play-pause-button {
            font-size: 50px;
            color: rgba(231, 44, 49, .8);
            cursor: pointer;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
    </style>
</head>

<body>
    <div class="audio-play">
        <a id="play-pause-button" class="fa fa-play"></a>
    </div>

    <script>
        var audio = new Audio("https://rusradio.hostingradio.ru/rusradio96.aacp");

        $('#play-pause-button').on("click",function(){
          if($(this).hasClass('fa-play'))
           {
             $(this).removeClass('fa-play');
             $(this).addClass('fa-pause');
             audio.play();
           }
          else
           {
             $(this).removeClass('fa-pause');
             $(this).addClass('fa-play');
             audio.pause();
           }
        });

        audio.onended = function() {
             $("#play-pause-button").removeClass('fa-pause');
             $("#play-pause-button").addClass('fa-play');
        };
    </script> 
</body>

</html>

Создаешь виджет HTML и в него:

HTML:

<div align="center">
    <a onclick="window.open('/radio/radio.html', 'radio', 'width=240, height=300, status=no, resizable=no, top=10, left=10');return false;" href="/radio/radio.html" target="_blank"><img src="картинка" width="32" height="32"></a>
</div>

параметры ширины, высоты и расположения окна, отрегулируешь и картинку конечно

levj3 · 17 Сен 2019

Сейчас попробую

Skaiman · 17 Сен 2019

Ghostz, да читай ты что пишу :)

levj3 · 17 Сен 2019

Установил значок, при нажатии открывается вкладка, но звука нет.

Skaiman · 17 Сен 2019

Да там на странице надо подключить font awesome и jquery, это ниже

Код:

<title>Наше радио</title>

вставить надо

Код:

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.2/css/fontawesome.min.css" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

levj3 · 17 Сен 2019

Туда же?

Skaiman · 17 Сен 2019

Ghostz написал(а):
Туда же?

в файл radio.html

levj3 · 17 Сен 2019

Теперь в окне нужно нажимать на серединку, чтобы заработало радио. Возможно ли сделать так, чтобы ничего не открывалось в окне, а сразу на форуме запускалось в радио?

Skaiman · 17 Сен 2019

там фа не подключился, просто там кнопка пуск/пауза, запустил слушаешь, нажал на паузу остановил, зачем автоплей, не надо им увлекаться :) щас поправим иконки

25517 · 17 Сен 2019

Ghostz написал(а):
Куда вписывать Java?

У Вас недостаточно прав для просмотра ссылок. Вход или Регистрация

levj3 · 17 Сен 2019

Семен Семеныч написал(а):
там фа не подключился, просто там кнопка пуск/пауза, запустил слушаешь, нажал на паузу остановил, зачем автоплей, не надо им увлекаться :) щас поправим иконки

Почему автоплей? Возможно ли примерно так сделать?

P.S. Поставил так, как Вы написали снизу, появились иконки. Но всё же возможно ли сделать так, как я указал выше?

Skaiman · 17 Сен 2019

Замени

Код:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.2/css/fontawesome.min.css" />

на

Код:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />

Ghostz написал(а):
Почему автоплей? Возможно ли примерно так сделать?

все там есть :) не умеешь читать и бежишь вперед паровоза :) просто не успеваю отвечать :)

Skaiman · 17 Сен 2019

Радио без директорий в корне и файлов.

В дереве узлов создаем страницу:
Часть URL-адреса: radio
дальше по желанию
снимаем галочки Отображать в списке узлов и ставим Расширенный режим
HTML-код шаблона:

HTML:

<xf:css>
    .p-staffBar, .p-header, .p-nav, .p-sectionLinks, .p-breadcrumbs, .p-body-header, .blockMessage, .p-footer {
        display: none;
    }
    .audio-play {
        display: block;
        position: relative;
        background: url(https://i4.imageban.ru/out/2019/07/11/3834eda42eb29fa74b7e8a981db8d7d7.jpg);
        background-size: cover;
        width: 250px;
        height: 250px;
        border: 1px solid #ccc;
    }

    #play-pause-button {
        font-size: 50px;
        color: rgba(231, 44, 49, .8);
        cursor: pointer;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
</xf:css>

<div class="audio-play">
    <a id="play-pause-button" class="fa fa-play"></a>
</div>

<xf:js>
    var audio = new Audio("https://rusradio.hostingradio.ru/rusradio96.aacp");

    $('#play-pause-button').on("click",function(){
        if($(this).hasClass('fa-play'))
        {
            $(this).removeClass('fa-play');
            $(this).addClass('fa-pause');
            audio.play();
        }
        else
        {
            $(this).removeClass('fa-pause');
            $(this).addClass('fa-play');
            audio.pause();
        }
    });

    audio.onended = function() {
        $("#play-pause-button").removeClass('fa-pause');
        $("#play-pause-button").addClass('fa-play');
    };
</xf:js>

В виджет:

HTML:

<div align="center">
    <a onclick="window.open('/pages/radio/', 'radio', 'width=270, height=300, status=no, resizable=no, top=10, left=10');return false;" href="/pages/radio/" target="_blank"><img src="https://imgholder.ru/240x80/8493a8/fff&text=РАДИО&font=bebas&fz=30"></a>
</div>

levj3 · 17 Сен 2019

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

Skaiman · 17 Сен 2019

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

XF 2.1 Радио виждетом

levj3

IlyaPep

levj3

Skaiman

levj3

Skaiman

levj3

Skaiman

levj3

Skaiman

levj3

Skaiman

levj3

Skaiman

25517

levj3

Skaiman

Skaiman

levj3

Skaiman

Похожие темы

Мы ценим вашу конфиденциальность