background music problem

[drosster]

hello. I embedded background music in my webpage and it plays fine on all my browsers including my android phone, but it seems not to play on my Iphone. Is there a special script which will allow background music to play on Iphone safari?

[jscheuer1]

This should:

http://www.dynamicdrive.com/forums/showthread.php?p=265275#post265275

The hover effects on the control image might not work on touch screens. If you just want the sound to play though, you don't need to use that part.

And then there's always:

http://www.schillmania.com/projects/soundmanager2/

[djr33]

As far as I know, there is no "hover" event on a touchscreen device. You would need to touch somewhere else, then move on top of the object, then stay stationary. That doesn't work very easily.
However, there are some preliminary ways to use gestures with Javascript on an iPhone if you search for them. I've used them (actually with the soundmanager2 script above), and they work, at least somewhat. They aren't perfect, but they aren't useless either.

[drosster]

Thanks for the help guys. Now to figure out how to install it

[drosster]

Hello. took your advice and downloaded the soundmanager. I,ve since I've been trying to understand it while getting it to work. The doc doesn't do a good job explaining how to input the script. Do you have a general idea on how to input the script to my page?

[djr33]

Just copy the code from one of the example pages. The doc is more for customization.
Unfortunately, it's not a very easy script to use (in some ways), but it's a very good script and works for almost all browsers/devices.

[drosster]

Thanks for responding again. I really do appreciate the help.I copy and paste the script from an example page and made the changes, but I still can't get it to play. This is the script I copied and edited: (www.soundinvestmentent.com//Mobile_home_apple.html)

<script type="text/javascript" src="/path/to/soundmanager2.js"></script>

<!-- configure it for your use -->
<script type="text/javascript">

soundManager.url = '/http://soundinvestmentent.com'; // directory where SM2 .SWFs live

// Note that SoundManager will determine and append the appropriate .SWF file to the URL,
// eg. /path/to/sm2-flash-movies/soundmanager2.swf automatically.

// Beta-ish HTML5 audio support (force-enabled for iPad), flash-free sound for Safari + Chrome. Enable if you want to try it!
// soundManager.useHTML5Audio = true;

// do this to skip flash block handling for now. See the flashblock demo when you want to start getting fancy.
soundManager.useFlashBlock = false;

// disable debug mode after development/testing..
// soundManager.debugMode = false;

// Option 1: Simple onload() + createSound() method

soundManager.onload = function() {
// SM2 has loaded - now you can create and play sounds!
soundManager.createSound('welcome','/http://soundinvestmentent.com/welcome.mp3');
soundManager.play('welcome');
};

// Option 2 (better): More flexible onload() + createSound() method

soundManager.onload = function() {
var mySound = soundManager.createSound({
id: 'aSound',
url: '/path/to/an.mp3'
// onload: [ event handler function object ],
// other options here..
});
mySound.play();
}

// Option 3 (best): onready() + createSound() methods, handle load/failure together:

soundManager.onready(function() {
// check if SM2 successfully loaded..
if (soundManager.supported()) {
// SM2 has loaded - now you can create and play sounds!
var mySound = soundManager.createSound({
id: 'welcome',
url: 'http://soundinvestmentent.com/welcome.mp3'
// onload: [ event handler function object ],
// other options here..
});
mySound.play();
} else {
// (Optional) Hrmm, SM2 could not start. Show an error, etc.?
}
});

</script>

[jscheuer1]

Do you have the rights or a license to use that song? If so, can you and would you grant the same to me so I can use it in my demos? If it's a remix, like your voice-over, over the rap, which is itself a remix, I believe that grants you rights as the licensor.

On to your question - There's no script on or associated with that page that would play any sound.

But I must admit, I took a quick look at sound manager and saw no quick path to just getting a sound to play.

Anyways, I'm wanting to develop my code, so try this page out in your mobile device(s):

http://home.comcast.net/~jscheuer1/molecules/

There could be other problems, but the only one I'm anticipating is with the rollover effects of the control image. Clicking it should still turn the sound on and off. Test it in a regular browser on a regular computer to see how the hover effects should go. I have added some touch events, so even that part (hover) might work.

However, as I say, if you don't want the user to be able to control the sound, we can disable the control button and there should be no problem.

But if there is a problem with the control button hover, or any other problems, please explain in detail what the problem(s) is/are and what device the problem is on.

If we're real lucky, mobile devices will be fine with it or at least able to toggle the sound and simply not see any rollover effects of the control button.

If we're real unlucky, the sound won't even play on the mobile device.

Things could range widely in between those two extreme possibilities.

Whatever happens, please let me know. And let me know about the rights to the song. What's it called?

[drosster]

Hi John. Yes I have permission to use the song. I tried the link on both android and Iphone but you don't hear anything. You can hear it on the desktop browser. I

[jscheuer1]

Bad news. Um try this very limited test page:

http://home.comcast.net/~jscheuer1/molecules/html5_test.htm

If that works in the mobiles, there's hope.

And if it's working in each mobile, click (tap it is I guess) on the button. See if it alerts anything, and if so what. This may be different in the different mobiles.

Back to the song. OK, so you have permission to use it. Do you have the rights to it, and if so are you willing to grant me a free license to use it in my demos?

[drosster]

Hello jscheuer1. No the link didn't work on the mobile phone. I found something called jplayer that I'm trying to figure out. With the song I know the artist who did it. I can let him know you would like to use it. is it for an app?

[jscheuer1]

No, it's for demos. I'd be happy to credit the artist. I just need something to be the sound that's heard in my online demos. So yes, please ask for me.

I too ran across jPlayer. It looks very promising. And, looking over the documentation I discovered two tidbits about mobile devices.


The media will not start unless the user clicks play. Once the user does so, you can stop and start using javascript. But the first time on any page load, the user must initiate play.


The HTML 5 controls must be 'visible'. They can be hidden in other ways, but they cannot be display: none or visibility: hidden and they cannot be omitted.


With that information and a test by a fellow moderator, I think I now have a workable demo of my code. Remember, you have to initiate play by clicking on the speaker icon:

http://home.comcast.net/~jscheuer1/molecules/

It's the same page as before, so either clear the browser's cache, refresh the page or both to make sure you're not viewing the earlier version.


More about this business of the user needing to initiate the first play action - In all likelihood, by using frames, iframes or AJAX, a scheme can be worked out whereby the user is 'tricked' into clicking play as the same click that loads the page.

However, if it's the first page on the site, or the first page the user gets to on the site, a splash page would be required. Javascript can probably be used to determine whether or not the user has arrived at the page via clicking on the 'trick' play button. If not and they're on a mobile device or tablet, the splash page could be shown.


Also I got jPlayer working. If you like I can put up some demos of it using the music from your site.

[drosster]

Hi jscheuer1. He's okay with you using the song. If you could link his site with the song that would be awsome. As far as the Jplayer goes it's really complicated and didn't work. I tried something call podsnack and this works but I don't like the monthly charge. If the player your making is html5 with a playlist I'll be more the delighted to use it on the site.

[jscheuer1]

Does podsnack work on iPhone?

jPlayer isn't all that complicated if you understand the library it's based on - jQuery, and read the docs.

I must admit though, until I got it working and read some of the docs, I too was a bit mystified by it. It's not an entry level sort of script. By that I mean it's not a good candidate for a beginner javascript coder.

It does do playlists though.

My script doesn't. It's simply for adding one or more sounds to a web page. Each may be toggled on or off.

So, what do you want to do with the playlist(s)? Originally you wanted a single background sound to the page. Is that still the objective, only instead of repeating only one song, going through a playlist of songs in the background?

Or did you want a player that would allow the user to listen to various tracks?

One thing I can tell you about background sound though is, with iPhone, perhaps others, the user must initiate play - you cannot have the song just start playing onload or as the page is loading. Well you perhaps could via some trickery as I alluded to in my previous post.

But in general, it's best not to have any sound or music start playing without user interaction. For a variety of reasons, folks should be given the opportunity to opt out of sound or music without having to hear it before they have a chance to decide.

As for your friend, I'd be more than happy to credit them and link to their site. Perhaps you should give me the link and/or tell me how to contact them.

[drosster]

Hi jscheuer1. What I'm doing is designing the page for that same artist your using the demo song. The whole concept is to have a 30 sec. background music play on the home page and a playlist to play his songs on a different page. The podsnack works fine. Will your player be able to play on Iphones? The artist name is "Best of Salute" www.soundinvestmentent.com. Keep me posted on the player dros63059 @ yahoo.com

[jscheuer1]

You're probably not going to find a plug and play service like podsnack that's totally free. In fact, though I could probably duplicate something like that with jPlayer, the amount of work involved would be prohibitive for a free forum like this. Even if you would be happy with one of the default skins of jPlayer, though that would make the amount of work involved less. And that's assuming they have default skins for playlists. I haven't looked into jPlayer enough yet to know that for sure.

I still find it hard to believe that podsnack would work on the iPhone, unless they have an HTML 5 solution for that device that they're not mentioning on their site - they may, probably should - it's simply not mentioned that I can see.

Further, there appears to be a limitation on iPhone as regards autostart for a background sound. Have you demonstrated to your satisfaction that podsnack can overcome that? I mean it's entirely possible, it would require some trick or tricks though because the default on iPhone is not to support Flash and not to support the playing of media without user interaction - clicking on a play button or link.

I'm testing one method right now with another moderator who has iPhone. If that fails one could probably have a popup division that says "Sound File Loading", that when dismissed activates the player. Sneaky and annoying, but effective.

However, consider this - I know many folks want their sites to start playing music right away, but it's almost always better to give the user the choice. The page will load faster. Many browser/OS/computer combos, though technically capable of playing sound, would in actual fact be crippled by doing so. And there's the annoyance factor. A sound that starts without the user's permission often causes folks to leave before they look at any images or read anything about (in this case presumably) the music.