使用jQuery从类获取soundManager soundId
我正在使用soundmanager的bar-ui js。
<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>
我有很多球员,所以我需要。
我想使用jQuery从html类中选择声音ID ...
我可能吗?
就像我在上面的代码中使用内容类,所以我可以应用一些自定义更改..
更新
看到这里有很多玩家
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.log(this.id + ' is loading');
}
});
如果你想通过DOM使你的ID可用,我建议在whileLoading
函数中设置一个数据属性,如下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')
从元素中检索该ID
(因为我通常避免jQuery,强制的香草解决方案是document.querySelector(selector).setAttribute('data-sound-id', this.id)
document.querySelector(selector).getAttribute('data-sound-id')
)
有一个特殊的属性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来确定它是在内容区域还是其他地方。 如果您需要详细说明如何处理最后一项任务,请在评论中告诉我们。
链接地址: http://www.djcxy.com/p/855.html上一篇: Get soundManager soundId from class using jQuery
下一篇: Why Facebook Graph API doesn't list all public events for a page?