Я использую 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');
}
});
Не могли бы вы добавить скрипку для своего кода? Я не вижу кода JavaScript в вашем вопросе.
@myfunkyside Да, мне нужно получить идентификатор песни плеера с классом html. Поскольку у меня много игроков на моей странице, например, в разделе контента, боковой панели, нижнем колонтитуле, поэтому мне нужно получить идентификатор проигрывателя раздела контента и применить к ним некоторый Javascript
Так где же ID песни в HTML-кодах выше? Какого результата вы ожидали бы от приведенного выше кода, если бы в нем было достаточно информации?
Пожалуйста, посмотрите, я только что обновил дополнительную информацию здесь
Как вы ожидаете, что вывод будет в предоставленном вами HTML?
Мне нужно получить этот идентификатор из класса игрока, используя идентификатор javascript или jquery: 'mySound',
Предоставьте Минимальный, полный и проверяемый пример, поскольку мы можем получить любой идентификатор, который вы хотите, в HTML-коде, который вы указали выше.
Когда soundmanager2 создает звук с помощью этого кода soundManager.createSound ({если мы добавим в этот идентификатор объекта: «что-то», тогда мы узнаем, что такое идентификатор этого объекта. Но если мы не упомянули soundmanager, создайте идентификатор, например «sound0», «sound1»
Теперь посмотрите на наш сайт support.simplepodcaster.com/clammr-it-sample, вы можете увидеть на нем двух игроков. Один в содержимом и один на боковой панели .... Я просто хочу получить идентификатор одного игрока, который находится в разделе содержимого
Используйте консоль и напишите команду window.soundManager.soundIDs;
вы получите все идентификаторы, созданные звуковым менеджером, но я хочу получить один из игроков, который находится в области содержимого
Можете ли вы предоставить ссылку на демонстрацию страницы? посмотрим на что мы смотрим.
Существует специальное свойство 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)
, где вы также можете проверить, прошла ли загрузка вообще успешно
Круто, да, похоже, это лучшее место для этого. Я действительно ничего не знаю об этой конкретной библиотеке, поэтому я просто ушел от того, что здесь.
Мне не удалось выбрать идентификатор звука с помощью jQuery, пока я не нажал кнопку воспроизведения
Вам нужно получить ID песен или плеера?