Viewing Automatically stop or pause one audio player when start playing other?

Automatically stop or pause one audio player when start playing other?



User: David P. 10 years ago
I have a page with many audio players using an old flash plugin made by Martin Laine (http://www.macloo.com/examples/audio_player/index.html).

I want that when I play one of them, if another player is also playing, stops automatically the first.

How can I do that?

Page Test:

http://www.davidpratsjuan.com/TESTS/AudioPlayer/audioplayer.html

P.S. In the future, I'm planning to leave this plugin and use any other HTLM 5 player, but the one included in EverWeb is not color customizable.

Last edit 10 years ago
User: Roddy 10 years ago
Well, that's a blast form the past!
As far as I can remember it was only the Wordpress version that had the stop one player when another starts feature. I did manage to do it with iWeb by putting the players into the same snippet. Who knows why it worked but it did. You will see the example about half way down this page.

I don't think the same idea will work in EverWeb. The HTML Snippet works in a different way from the iWeb version.

You will find some alternative audio players among the media widgets - including a playlist player. Also a styled button HTML5 audio player with track title/artist name.

I also have a couple of new audio widgets that will be included in the Touch widgets when they are released. One is a single player and the other a playlist based on the audioJS script with versions for the fullsite and the mobile versions.

All the above use HTML5 playback with flash fallback for ancient browsers.

-------------------------------
Roddy

Website: http://everwebwidgets.com
Contact: http://everwebwidgets.com/ewWidgets-home/contact.html
NOTE: I am an EverWeb user and NOT affiliated with EverWeb! Any opinions expressed in this forum are my own.
User: David P. 10 years ago
Thanks Rody!

I've seen the alternative media widgets in your website EverWeb Code Box. Some of them perhaps can help me in new sections of my web, but I like a lot how this old flash player looks in another page, how opens when you click the button to play, how it closes when stop, and that you have many options to customize colors, text, size, title, etc.

I will wait to see these new audio widgets that you're talking, hope one of them can substitute this old player, because I know that today the use of HTML5 is better than flash and I think it's time to change.
User: David P. 10 years ago
I've found a very nice player, very similar to the old.

Here is a demo:

http://www.amandamartinez.ca/common/mini_player/manana/index.php?lang=es

http://pupunzi.com/#mb.components/mb.miniAudioPlayer/miniAudioPlayer.html

Something like that it's perfect for my purposes! But I don't know if it works with Everweb... I think it's very dificult to use, I've spent some hours trying to understand what I need to do to use it, but no luck for now...
User: Roddy 10 years ago
I've seen that player before but rejected it for several reasons.

First, you probably notice that the player you linked to on the Amanda Martinex site doesn't work in Firefox. That had me fooled until I looked the code on the Developer's site and noticed that they added an OGG file. Most modern players will fallback to flash in Firefox so that it is not required to insert an OGG file too.

Secondly, the player apparently doesn't work on Android and reverts to the default HTML5 player on these devices. These devices have a large share of the touch device market and can't be ignored.

To insert this player into EverWeb using the Dev's instructions you would need to be publishing to a server other than the EverWeb one.

I spent a while ripping out the necessary files and modifying the CSS so that it could be inserted into EverWeb for those who publish to the EverWeb server. It still isn't an easy task for anyone without at least little knowledge of code. I suppose I could make a widget for it but I wonder how many would want to use it given the limitations and the inconvenience of having to have the audio file in two formats.

I can't figure out why the Dev's haven't got it to fallback to flash in Firefox and why they even bothered to include a SWF player when it doesn't appear to serve any useful purpose!

-------------------------------
Roddy

Website: http://everwebwidgets.com
Contact: http://everwebwidgets.com/ewWidgets-home/contact.html
NOTE: I am an EverWeb user and NOT affiliated with EverWeb! Any opinions expressed in this forum are my own.
User: Roddy 10 years ago
Here's a demo of the Elastic Audio MP3 Player in EverWeb using a widget.

-------------------------------
Roddy

Website: http://everwebwidgets.com
Contact: http://everwebwidgets.com/ewWidgets-home/contact.html
NOTE: I am an EverWeb user and NOT affiliated with EverWeb! Any opinions expressed in this forum are my own.
User: David P. 10 years ago
Great Roddy!

After many hours, because I don't have a lot of knowledge of code, I discovered how to use it with Everweb:

I added this code in the head section of EverWeb:

<!-- jQuery MiniPlayer -->
<link href='http://fonts.googleapis.com/css?family=Lekton' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href=“css/jQuery.mb.miniAudioPlayer.min.css?_v= 1.8.3" title="style" media="screen"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.js"></script>
<script type="text/javascript" src="http://www.davidpratsjuan.com/PlugIns/MiniAudioPlayer/jQuery.mb.miniAudioPlayer.js?_v= 1.8.3"></script>
<script type="text/javascript">

$(function(){

var isIframe=function(){var a=!1;try{self.location.href!=top.location.href&&(a=!0)}catch(b){a=!0}return a};if(!isIframe()){var logo=$("<a href='http://pupunzi.com/#mb.components/components.html' style='position:absolute;top:0;z-index:1000'><img id='logo' border='0' src='http://pupunzi.com/images/logo.png' alt='mb.ideas.repository'></a>");$("#wrapper").prepend(logo),$("#logo").fadeIn()}

if(jQuery.isAndroidDefault){
alert("Sorry, your browser does not support this implementation of the player. It will be used the standard HTML5 audio player instead")
}

$(".audio").mb_miniPlayer({
width:300,
inLine:false,
id3:true,
addShadow:false,
pauseOnWindowBlur: false,
downloadPage:null
});
});

</script>
<!-- jQuery MiniPlayer -->


Then, I call the player with an HTML snippet like this:

<a id="m1" class="audio {skin:'gray', autoPlay:false, addShadow:true,addGradientOverlay:false}" href="http://www.davidpratsjuan.com/Audio/Interpretaciones/Comptine.mp3">L'Après Midi</a>

I've allowed the plugin in my server (I'm not using Everweb server) but I've discovered that if the CSS files are not in a folder called CSS in the same directory that the html page is using it, the player is not showed correctly in Firefox and insted of play or volume buttons I see the letters V and P. So, I solved this just adding a CSS folder into each directory of pages that are using the plugin.

Here's my demo:

http://davidpratsjuan.com/TESTS/miniaudioplayer.html

I've tested the widget with latest versions of Firefox, Chrome, Safari and the new Microsoft Edge (old Internet Explorer). I'm not using ogg files, only mp3, but it plays in all browsers. I don't know how to see if it's playing using the SWF player or the HTML5 player... but works in all browsers for now.

I've also tried with my iPad and iPhone, and works well too in both. But as you say, in Android devices is using the browser default HTML5 player.
User: David P. 10 years ago
Great Roddy!

After many hours, because I don't have a lot of knowledge of code, I discovered how to use it with Everweb:

I added this code in the head section of EverWeb:


<!-- jQuery MiniPlayer -->
<link href='http://fonts.googleapis.com/css?family=Lekton' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href=“css/jQuery.mb.miniAudioPlayer.min.css?_v= 1.8.3" title="style" media="screen"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.js"></script>
<script type="text/javascript" src="http://www.davidpratsjuan.com/PlugIns/MiniAudioPlayer/jQuery.mb.miniAudioPlayer.js?_v= 1.8.3"></script>
<script type="text/javascript">

$(function(){

var isIframe=function(){var a=!1;try{self.location.href!=top.location.href&&(a=!0)}catch(b){a=!0}return a};if(!isIframe()){var logo=$("<a href='http://pupunzi.com/#mb.components/components.html' style='position:absolute;top:0;z-index:1000'><img id='logo' border='0' src='http://pupunzi.com/images/logo.png' alt='mb.ideas.repository'></a>");$("#wrapper").prepend(logo),$("#logo").fadeIn()}

if(jQuery.isAndroidDefault){
alert("Sorry, your browser does not support this implementation of the player. It will be used the standard HTML5 audio player instead")
}

$(".audio").mb_miniPlayer({
width:300,
inLine:false,
id3:true,
addShadow:false,
pauseOnWindowBlur: false,
downloadPage:null
});
});

</script>
<!-- jQuery MiniPlayer -->


Then, I call the player with an HTML snippet like this:

<a id="m1" class="audio {skin:'gray', autoPlay:false, addShadow:true,addGradientOverlay:false}" href="http://www.davidpratsjuan.com/Audio/Interpretaciones/Comptine.mp3">L'Après Midi</a>

I've allowed the plugin in my server (I'm not using Everweb server) but I've discovered that if the CSS files are not in a folder called CSS in the same directory that the html page is using it, the player is not showed correctly in Firefox and insted of play or volume buttons I see the letters V and P. So, I solved this just adding a CSS folder into each directory of pages that are using the plugin.

Here's my demo:

http://davidpratsjuan.com/TESTS/miniaudioplayer.html

I've tested the widget with latest versions of Firefox, Chrome, Safari and the new Microsoft Edge (old Internet Explorer). I'm not using ogg files, only mp3, but it plays in all browsers. I don't know how to see if it's playing using the SWF player or the HTML5 player... but works in all browsers for now.

I've also tried with my iPad and iPhone, and works well too in both. But as you say, in Android devices is using the browser default HTML5 player.

Last edit 10 years ago
User: Roddy 10 years ago
I have now got the EverWeb widget to work in Firefox without an OGG file and also in a directory on a test site.

Can you Contact Me so that I can send you a copy of the widget to test? If it works for you, it will be a lot easier than jumpimg through all these hoops and using absolute URLs to the assets.

-------------------------------
Roddy

Website: http://everwebwidgets.com
Contact: http://everwebwidgets.com/ewWidgets-home/contact.html
NOTE: I am an EverWeb user and NOT affiliated with EverWeb! Any opinions expressed in this forum are my own.
User: David P. 10 years ago
Of course. Thanks Roddy!

I will write you now. :)
User: Roddy 10 years ago
Here's a demo of the Elastic Audio widget.

-------------------------------
Roddy

Website: http://everwebwidgets.com
Contact: http://everwebwidgets.com/ewWidgets-home/contact.html
NOTE: I am an EverWeb user and NOT affiliated with EverWeb! Any opinions expressed in this forum are my own.


Post Reply
You must login or signup to post.