Получите soundManager soundId из класса с помощью jQuery

Я использую bar-ui js soundmanager.

<div id = "sm2-99943" class = "sm2-bar-ui content compact flat full-width playlist full-width-player ">
    <div class = "bd sm2-main-controls">
        <div class = "sm2-inline-element sm2-button-element">
            <div class = "sm2-button-bd" style = "background: transparent url(http://support.simplepodcaster.com/wp-content/uploads/2018/04/podcast_channel_artwork-150x150.png) repeat scroll 0% 0% / cover ;">
                <div id = "spp-player-background"> </div>
                <a href = "#play" class = "sm2-inline-button play-pause">Play / pause</a>
                <div class = "eq">
                    <span class = "bar bar-1"></span>
                    <span class = "bar bar-2"></span>
                    <span class = "bar bar-3"></span>
                    <span class = "bar bar-4"></span>
                </div>
            </div>
        </div>
        <div class = "sm2-inline-element sm2-inline-status progressbar" style = "padding-right:0px !important;">
            <div class = "sm2-playlist">
                <div class = "sm2-playlist-target" style = "max-width: 100% !important;"></div>
            </div>
            <div class = "sm2-progress">
                <div class = "sm2-progress-bd">
                    <div class = "sm2-progress-track">
                        <div class = "sm2-progress-bar1" style = "display:none;"></div>
                        <div class = "sm2-progress-bar"></div>
                        <div class = "sm2-progress-ball">
                            <div class = "icon-overlay"></div>
                        </div>
                    </div>
                </div>
                <div class = "sm2-row">
                    <div class = "sm2-inline-time1" style = "display:none;">0:00</div>
                    <div class = "sm2-inline-time">0:00</div>
                    <div class = "sm2-inline-duration">0:00</div>
                </div>
            </div>
        </div>
        <div class = "sm2-inline-element sm2-button-element sm2-menu">
            <div class = "sm2-button-bd">
                <a href = "#menu" class = "sm2-inline-button menu">menu</a>
            </div>
        </div>
    </div>
    <div class = "bd sm2-playlist-drawer sm2-element">
        <div class = "sm2-playlist-wrapper">
            <ul class = "sm2-playlist-bd">
                <li><a href = "https://traffic.libsyn.com/secure/hmourra/HaniPodcast1_-_Introduction.mp3?dest-id=201638">Episode 1 - Introduction</a></li>
                <li><a href = "https://traffic.libsyn.com/secure/hmourra/HaniPodcast2_-_Tools_To_Grow.mp3?dest-id=201638">Episode 2 - How To Start Podcasting</a></li>
                <li><a href = "https://traffic.libsyn.com/secure/hmourra/SRP-thankyou.mp3?dest-id=201638">Episode 5 - Thank you!</a></li>
                <li><a href = "https://traffic.libsyn.com/secure/hmourra/input.mp3?dest-id=201638">Episode 6</a></li>
                <li><a href = "https://traffic.libsyn.com/secure/hmourra/episode6.mp3?dest-id=201638">2nd Episode 7</a></li>
                <li><a href = "https://traffic.libsyn.com/secure/hmourra/Episode8.mp3?dest-id=201638">  Episode 10 - Blogging vs Podcasting</a></li>
                <li><a href = "https://traffic.libsyn.com/secure/hmourra/Episode9.mp3?dest-id=201638">Episode 11 - Video vs Audio</a></li>
                <li><a href = "https://traffic.libsyn.com/secure/hmourra/output.mp3?dest-id=201638">Episode 12 - Social Sharing Your Content</a></li>
                <li><a href = "https://traffic.libsyn.com/secure/hmourra/hani2.mp3?dest-id=201638">Episode 13 - Growing Your Audience</a></li>
                <li><a href = "https://traffic.libsyn.com/secure/hmourra/ep15.mp3?dest-id=201638">Episode 15 - Blogging for Leads</a></li>
                <li><a href = "https://traffic.libsyn.com/secure/hmourra/ep16.mp3?dest-id=201638">Episode 16 - How To Get More iTunes Reviews</a></li>
                <li><a href = "https://traffic.libsyn.com/secure/hmourra/ep17.mp3?dest-id=201638">Episode 17 - "Growing Your Email List on Autopilot"</a></li>
                <li><a href = "https://traffic.libsyn.com/secure/hmourra/ep18.mp3?dest-id=201638">JUP 014 | Alexander Dahms: Mehrwert für andere statt Gewinndenken</a></li>
                <li><a href = "https://traffic.libsyn.com/secure/hmourra/Iron_Horse.mp3?dest-id=201638">Episode 18</a></li>
                <li><a href = "https://traffic.libsyn.com/secure/hmourra/Smoking_Gun.mp3?dest-id=201638">Episode 19 - New & Noteworthy</a></li>
                <li><a href = "https://traffic.libsyn.com/secure/hmourra/Iron_Horse_copy.mp3?dest-id=201638">Episode 21 - Beliefs -> Decisions -> Outcomes</a></li>
                <li><a href = "https://traffic.libsyn.com/secure/hmourra/WisdomTrek-Podcast-Day-597mixdown.mp3?dest-id=201638">Episode 22 - Publishing to Facebook</a></li>
                <li><a href = "https://traffic.libsyn.com/secure/hmourra/ep22.mp3?dest-id=201638">Episode 24 - Repurposing Your Content</a></li>
                <li><a href = "https://traffic.libsyn.com/secure/hmourra/test.mp3?dest-id=201638">Episode 26 - \Backslash /Frontslash To Facebook</a></li>
                <li><a href = "https://traffic.libsyn.com/secure/hmourra/combined_This-is-the-title-with-an-emoji1523041021218.mp3?dest-id=201638">This is the title with an emoji</a></li>
            </ul>
        </div>
    </div>
</div>

У меня много игроков, так что мне нужно.

Я хочу выбрать идентификатор звука из класса html с помощью jQuery ...

И что можно ???

Как будто я использую класс содержимого в приведенном выше коде, поэтому я могу применить некоторые пользовательские изменения, которые ..

Обновлять

Смотрите, здесь много игроков

http://www.schillmania.com/projects/soundmanager2/demo/bar-ui/

А вот пример кода soundmanager2

var mySoundObject = soundManager.createSound({
    // optional id, for getSoundById() look-ups etc. If omitted, an id will be generated.
    id: 'mySound',
    url: '/audio/mysoundfile.mp3',
    // optional sound parameters here, see Sound Properties for full list
    volume: 50,
    autoPlay: true,
    whileloading: function() {
        console.info(this.id + ' is loading');
    }
});

Вам нужно получить ID песен или плеера?

myfunkyside 13.04.2018 15:46

Не могли бы вы добавить скрипку для своего кода? Я не вижу кода JavaScript в вашем вопросе.

Ali Soltani 14.04.2018 06:04

@myfunkyside Да, мне нужно получить идентификатор песни плеера с классом html. Поскольку у меня много игроков на моей странице, например, в разделе контента, боковой панели, нижнем колонтитуле, поэтому мне нужно получить идентификатор проигрывателя раздела контента и применить к ним некоторый Javascript

Mohammad Umer 14.04.2018 07:31

Так где же ID песни в HTML-кодах выше? Какого результата вы ожидали бы от приведенного выше кода, если бы в нем было достаточно информации?

Hikarunomemory 14.04.2018 10:03

Пожалуйста, посмотрите, я только что обновил дополнительную информацию здесь

Mohammad Umer 14.04.2018 11:39

Как вы ожидаете, что вывод будет в предоставленном вами HTML?

Hikarunomemory 14.04.2018 15:21

Мне нужно получить этот идентификатор из класса игрока, используя идентификатор javascript или jquery: 'mySound',

Mohammad Umer 14.04.2018 15:39

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

Hikarunomemory 14.04.2018 15:56

Когда soundmanager2 создает звук с помощью этого кода soundManager.createSound ({если мы добавим в этот идентификатор объекта: «что-то», тогда мы узнаем, что такое идентификатор этого объекта. Но если мы не упомянули soundmanager, создайте идентификатор, например «sound0», «sound1»

Mohammad Umer 14.04.2018 16:07

Теперь посмотрите на наш сайт support.simplepodcaster.com/clammr-it-sample, вы можете увидеть на нем двух игроков. Один в содержимом и один на боковой панели .... Я просто хочу получить идентификатор одного игрока, который находится в разделе содержимого

Mohammad Umer 14.04.2018 16:09

Используйте консоль и напишите команду window.soundManager.soundIDs;

Mohammad Umer 14.04.2018 16:09

вы получите все идентификаторы, созданные звуковым менеджером, но я хочу получить один из игроков, который находится в области содержимого

Mohammad Umer 14.04.2018 16:10

Можете ли вы предоставить ссылку на демонстрацию страницы? посмотрим на что мы смотрим.

OPMat 17.04.2018 05:18
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
7
13
252
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Существует специальное свойство dom, в котором хранятся все объекты DOM проигрывателя, которые, например, вы можете получить с помощью выражения window.sm2BarPlayers[0].dom в соответствии с кодом библиотеки bar-ui, который вы демонстрируете в своем примере (оно, в свою очередь, использует библиотеку soundmanager).

Насколько я понял, вы ищете связь между SMSound (который вы получаете через window.soundManager.getSoundById('sound0')) и упомянутым мною проигрывателем. Это соединение существует и хранится в частной переменной для игрока (это закрытие с точки зрения JS):

exports = {
      on: null,
      actions: actions,
      dom: dom,
      playlistController: playlistController
    };
    soundObject = makeSound(playlistController.getURL());

Позже возвращается переменная exports, и это то, что у вас под рукой, тогда как soundObject закрыт внутри. Хотя, похоже, есть уловка для выполнения вашей задачи, как показывает код: и ваш звук, и его проигрыватель имеют один и тот же URL-адрес, и именно так вы можете найти соединение. Другими словами, вот подход:

var url = window.soundManager.getSoundById('sound0').url; //get the url of a sound
var player = window.sm2BarPlayers.find(function(p) { return p.playlistController.getURL() == url });
// Here you can use p.dom property where its DOM elements are kept and pass them to jQuery to build other search queries you need

В заключение, имея объекты DOM проигрывателя, вы можете позже определить, находится ли он в области содержимого или где-то еще, с помощью стандартных селекторов JS или jQuery. Если вам нужна дополнительная информация о том, как решить последнюю задачу, дайте мне знать в комментариях.

Ответ принят как подходящий

Если вы хотите, чтобы ваш идентификатор был доступен через DOM, я бы предложил установить атрибут данных в функции whileLoading следующим образом:

var mySoundObject = soundManager.createSound({
id: 'mySound',
url: '/audio/mysoundfile.mp3',
// optional sound parameters here, see Sound Properties for full list
volume: 50,
autoPlay: true,
whileloading: function() {
    jQuery(_Element_Selector_You_Want_To_Bind_To_).data('sound-id', this.id)
}
});

Затем вы можете получить этот идентификатор из элемента с помощью jQuery(_Element_Selector_You_Want_To_Bind_To_).data('sound-id').

(Поскольку я обычно избегаю jQuery, обязательным ванильным решением является document.querySelector(selector).setAttribute('data-sound-id', this.id)document.querySelector(selector).getAttribute('data-sound-id') )

Что ж, это тоже подход. Хотя для этой конкретной цели я бы не стал использовать событие whileloading, поскольку оно должно «срабатывать с регулярным интервалом, когда загружается звук и получены новые данные» (schillmania.com/projects/soundmanager2/doc/#sm-config). Лучше использовать onload(boolean:success), где вы также можете проверить, прошла ли загрузка вообще успешно

Oleg Safarov 18.04.2018 07:15

Круто, да, похоже, это лучшее место для этого. Я действительно ничего не знаю об этой конкретной библиотеке, поэтому я просто ушел от того, что здесь.

jmcgriz 18.04.2018 16:02

Мне не удалось выбрать идентификатор звука с помощью jQuery, пока я не нажал кнопку воспроизведения

Mohammad Umer 21.04.2018 07:56

Другие вопросы по теме