Having trouble setting SM2 up.

paulconstantine commented 6 years ago

I'm trying to integrate the soundmanager into a Drupal Website and am lost in the setup.

When trying to create a block for the website (where the player should appear) I can only get parts of it to appear. Probably because I don't really know how to integrate the "script" , the "html" and the "css" in that block.

The website is running on an Ubuntu 16.04 LTS server and I've extracted and copied the zip file to: "/usr/lib/soundmanager"

When entering the paths for the scripts and the swf I use the complete server path where the soundmanager package is located. What I can not make to appear is the "Compact UI, full width". I simply don't know how.

Used a Muses HTML5 Player before which just involved copying the generated code into the block and that worked. But that player wasn't a good solution. I'd love to get it working with the Sound Manager if I'd just know how.

As you may have deducted I'm not a developer I have to google my way through most code. Maybe you could point out a simple setup guide for beginners like me.

Kind regards, Paul

paulconstantine commented 6 years ago

Managed to get it going by taking the HTML from the demo and creating a file with the scrips, CSS, and HTML. Don't know if this is the way to do, but did not find any instructions elsewhere.

Here is the player file I created (player.html):

<!DOCTYPE html>
<head>
    <meta charset="UTF-8" />
    <script type="text/javascript" src="../../script/soundmanager2.js"></script>
    <script src="script/bar-ui.js"></script>
    <link rel="stylesheet" href="css/bar-ui.css" />
<style>
.sm2-bar-ui compact full-width {
 font-size: 20px;
}
.sm2-bar-ui .sm2-main-controls,
.sm2-bar-ui .sm2-playlist-drawer {
 background-color: #333333;
}
.sm2-bar-ui .sm2-inline-texture {
 background: #000;
}
</style>
</head>
<body>
    <div class="sm2-bar-ui compact full-width">
    <div class="bd sm2-main-controls">
    <div class="sm2-inline-texture"></div>
    <div class="sm2-inline-gradient"></div>
    <div class="sm2-inline-element sm2-button-element">
    <div class="sm2-button-bd">
    <a href="#play" class="sm2-inline-button sm2-icon-play-pause">Play / pause</a>
    </div>
    </div>
    <div class="sm2-inline-element sm2-inline-status">
    <div class="sm2-playlist">
    <div class="sm2-playlist-target">
     <!-- playlist <ul> + <li> markup will be injected here -->
     <!-- if you want default / non-JS content, you can put that here. -->
     <noscript><p>JavaScript is required.</p></noscript>
     </div>
     </div>
     </div>
     <div class="sm2-inline-element sm2-button-element sm2-volume">
     <div class="sm2-button-bd">
     <span class="sm2-inline-button sm2-volume-control volume-shade"></span>
     <a href="#volume" class="sm2-inline-button sm2-volume-control">volume</a>
     </div>
     </div>
     </div>
     <div class="bd sm2-playlist-drawer sm2-element">
     <div class="sm2-inline-texture">
     <div class="sm2-box-shadow"></div>
     </div>
     <!-- playlist content is mirrored here -->
     <div class="sm2-playlist-wrapper">
     <ul class="sm2-playlist-bd">
     <li><a href="http://stream-uk1.radioparadise.com/mp3-128"><b>Radio Paradise</b> - Live Stream</a></li>
     </ul>
     </div>
     </div>
</body>
</html>

paulconstantine commented 6 years ago

Sorry, did not mean to close this. Just need to know if this was the right way to create the player. Not sure, also the player always needs two clicks to start to play. And is also is throwing errors:

TypeError: null is not an object (evaluating 'o.addEventListener') TypeError: null is not an object (evaluating 'dom.duration.innerHTML = getTime(this.duration, true)') TypeError: undefined is not an object (evaluating 'exports.on')

paulconstantine commented 6 years ago

To be more precise. I found these instructions on the Bar Ui page.

Once initialized, players will be added to the array window.sm2BarPlayers. You can access and control players in this fashion. For example, window.sm2BarPlayers[0].actions.play() will start the first player UI. You can also toggle the playlist "drawer" via window.sm2BarPlayers[0].actions.menu().

So I figure, if I want the bar-ui 4, I need to add "window.sm2BarPlayers[3].actions.play()" somewhere. Unfortunately, I do not know, where to add that line of code.

Can anyone tell me where to add that? And possible the correct diction too?

Thanks. Paul

paulconstantine commented 6 years ago

Hello ... is there anyone out there?

Is the "bar-ui" even suitable for live radio streaming? After looking into this for days I am still getting errors and errors. I believe that a lot of functionality in the bar-ui (i.e. the playlist and the inline-status) are not really needed for radio streaming. Maybe they are throwing all these errors I'm getting.

My problem: If I use the barebone script everything is perfect. But I have no controls like a "play/stop toggle" or a "volume slider". Tried for days to get them integrated but no dice.

Can anybody help?

SmooveC commented 6 years ago

Mate this code is bad......just gives me this

SmooveC commented 6 years ago

I have spent a whole day trying to get this to work, shouldn't be this difficult

paulconstantine commented 6 years ago

I kind of gave up on the soundmanager. For one thing Flash is dead ... so why bother. And it's almost impossible to get the interface to work unless you are a real coder.

Instead I use HTML5 audio now, that's just a lot simpler. The below example would stream "Radio Paradise".

<audio controls>
  <source src="http://stream-uk1.radioparadise.com/mp3-128">
</audio>

scottschiller commented 6 years ago

Apologies, @paulconstantine! I have been off and swamped with professional work, have not had time to work on SM2. I have a 100% HTML5 branch in the works, which is removing dead code from the codebase. SM2 has been running 100% HTML5 for a few years now, but the old / fallback JS + Flash code is there for folks who want to support IE < 9 (and that's where SM2 originated.)

You make a great point that HTML5 <audio> is pretty darn stable, has a built-in native UI and works reliably across mobile and desktop. When I made SM2, HTML5 <audio> didn't exist yet, so I aimed to make up the JS API that I wished existed. I feel like I got close. 😂

Anyway, my apologies for the late follow-up, and I realize I did a lousy job with the demo page for the "Bar UI". I should have had copy/paste-able blocks of code for folks to reference right underneath each player. I forgot to say "view source" for people to see the HTML used for each one, so that did mean it was restricted more to developer types.

I should add, your best bet right now is probably <audio controls> because on mobile, for example, you will often not have a volume control option; it just doesn't work. (At least, last I tried on Safari on iOS.) You would have to account for that in SM2 + Bar UI to hide the volume for mobile, if I didn't do that already ... I forget. 😬

@SmooveC: You're running into similar issues I guess, I addressed your feedback on the other issue. Sorry, mate. 😬

paulconstantine commented 6 years ago

Thank you @scottschiller for your kind reply and your advice on hiding the volume control on mobile :-)

scottschiller / SoundManager2

Having trouble setting SM2 up. #229