Get soundManager soundId from class using jQuery
I am using bar-ui js of 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>
I have many players so what i need.
I want to select sound id from html class using jQuery...
I that possible ???
Like i am using content class in the above code so i can apply some custom changes that..
Update
See here are many players
http://www.schillmania.com/projects/soundmanager2/demo/bar-ui/
And here is example of soundmanager2 code
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');
}
});
If you'd like to make your ID available through the DOM, I'd suggest setting a data attribute in the whileLoading function like so:
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)
}
});
Then afterward, you can retrieve that ID from the element with jQuery(_Element_Selector_You_Want_To_Bind_To_).data('sound-id')
(Since I generally avoid jQuery, compulsory vanilla solution is document.querySelector(selector).setAttribute('data-sound-id', this.id) document.querySelector(selector).getAttribute('data-sound-id') )
There is a special property dom storing all DOM objects of a player which for instance you can get through an expression window.sm2BarPlayers[0].dom according to the code of the bar-ui library you demonstrate in your example (it in turn exploits the soundmanager library).
As far as I understood, you're looking for the connection between SMSound (which you obtain through window.soundManager.getSoundById('sound0') ) and the player object I mentioned. This connection is existent and it's kept in a private variable for the player (it's a closure in terms of JS):
exports = {
on: null,
actions: actions,
dom: dom,
playlistController: playlistController
};
soundObject = makeSound(playlistController.getURL());
The exports variable is later returned and that's what you have at your fingertips, whereas soundObject is closed inside. Though there seems to be a trick to accomplish your task as the code reveals: both your sound and its player have the same url and that's how you can find the connection. In other words, here is the approach:
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
To conclude, having the player DOM objects, you can later determine whether it's in the content area or somewhere else by means of standard JS selectors or jQuery ones. If you need some elaboration on how to tackle the last task, let me know in the comments.
链接地址: http://www.djcxy.com/p/856.html