Topic: WebPlus X8 Audio Player(Add On From 2013s Post)
i would like to customize the player to look something like this
https://codepen.io/stevenfabre/pen/KKPJyW
now is there anyway i could possible make this happen
if so how?
An independent forum site for members of the Serif software community
You are not logged in. Please login or register.
Automated signup has been disabled for these forums. If you wish to register, please send an email to admin[at]punster[dot]me stating your preferred username.
Embedded images: Click on the Add image to post link below the message box. Your photo will be uploaded to the postimage website and then shared here via a thumbnail link. Click on the thumbnail for a larger view.
Private messages: There is no pop-up alert for new PMs on these forums, so you need to look out for the PM link (near the top right-hand corner of any forum page) becoming bold.
Alfred's Serif Users' Forums → WebPlus → WebPlus X8 Audio Player(Add On From 2013s Post)
i would like to customize the player to look something like this
https://codepen.io/stevenfabre/pen/KKPJyW
now is there anyway i could possible make this happen
if so how?
I’ve just had a look at the linked page. It seems to use jQuery and some clever CSS code.
You would need to use an HTML Code Fragment object to implement this in WebPlus. Have you ever worked with code fragments in any of your WebPlus projects?
I’ve just had a look at the linked page. It seems to use jQuery and some clever CSS code.
You would need to use an HTML Code Fragment object to implement this in WebPlus. Have you ever worked with code fragments in any of your WebPlus projects?
never worked with code fragments
Alfred wrote:I’ve just had a look at the linked page. It seems to use jQuery and some clever CSS code.
You would need to use an HTML Code Fragment object to implement this in WebPlus. Have you ever worked with code fragments in any of your WebPlus projects?
never worked with code fragments
When you insert a code fragment object on the WebPlus page, you get a dialog offering a choice between pasting to the head or the body of the HTML. The CSS (Cascading Style Sheet) code should go in the head section, between <style> and </style> tags. Take a look at W3Schools to see how it works:
https://www.w3schools.com/csS/tryit.asp … rycss_text
The JS (JavaScript) code goes between <script> and </script> tags in the body section, like this:
<script>
$(document).ready(function() {
var icon = $('.play');
icon.click(function() {
icon.toggleClass('active');
return false;
});
});
</script>
The HTML code also goes in the body section, and its appearance in a browser will be determined by the size and position of the code fragment box on the WebPlus page.
strawbs89 wrote:Alfred wrote:I’ve just had a look at the linked page. It seems to use jQuery and some clever CSS code.
You would need to use an HTML Code Fragment object to implement this in WebPlus. Have you ever worked with code fragments in any of your WebPlus projects?
never worked with code fragments
When you insert a code fragment object on the WebPlus page, you get a dialog offering a choice between pasting to the head or the body of the HTML. The CSS (Cascading Style Sheet) code should go in the head section, between <style> and </style> tags. Take a look at W3Schools to see how it works:
https://www.w3schools.com/csS/tryit.asp … rycss_text
The JS (JavaScript) code goes between <script> and </script> tags in the body section, like this:
<script> $(document).ready(function() { var icon = $('.play'); icon.click(function() { icon.toggleClass('active'); return false; }); }); </script>
The HTML code also goes in the body section, and its appearance in a browser will be determined by the size and position of the code fragment box on the WebPlus page.
i have the code like this
<!-- Header Code -->
<!--Header code for HTML Fragment frag_7 -->
<!-- HTML Fragment frag_7 -->
<!--Preamble for HTML Fragment frag_7-->
<div __AddCode="here" style="position:absolute;left:558px;top:67px;width:392px;height:338px;/*Add Style*/">
<div class="control play trigger-audio">
<span class="left"></span>
<audio src="http://scotspaul.vside-radio.com:7355/stream" volume="1.0"></audio>
<span class="right"></span>
</div>
<style>
.control {
border: 11.2px solid #333;
border-radius: 50%;
margin: 20px;
padding: 28px;
width: 112px;
height: 112px;
font-size: 0;
white-space: nowrap;
text-align: center;
cursor: pointer;
}
.control,
.control .left,
.control .right,
.control:before {
display: inline-block;
vertical-align: middle;
transition: border 0.4s, width 0.4s, height 0.4s, margin 0.4s;
transition-tiomig-function: cubic-bezier(1, 0, 0, 1);
}
.control:before {
content: "";
height: 112px;
}
.control.pause .left,
.control.pause .right {
margin: 0;
border-left: 36.96px solid #333;
border-top: 0 solid transparent;
border-bottom: 0 solid transparent;
height: 96.992px;
}
.control.pause .left {
border-right: 22.4px solid transparent;
}
.control.play .left {
margin-left: 18.66666667px;
border-left: 48.496px solid #333;
border-top: 28px solid transparent;
border-bottom: 28px solid transparent;
border-right: 0px solid transparent;
height: 56px;
}
.control.play .right {
margin: 0;
border-left: 48.496px solid #333;
border-top: 28px solid transparent;
border-bottom: 28px solid transparent;
height: 0px;
}
.control:hover {
border-color: #000;
}
.control:hover .left,
.control:hover .right {
border-left-color: #000;
}
</style>
<script>
const audioButtons = document.querySelectorAll('.trigger-audio')
const buttonToStopAllAudios = document.querySelector('.fa-stop')
const getAudioElementFromButton = buttonElement =>
buttonElement.querySelector('audio')
const stopAudioFromButton = buttonElement => {
// Pause the audio
getAudioElementFromButton(buttonElement).pause()
// Update element classes
buttonElement.classList.add('fa-play')
buttonElement.classList.remove('fa-pause')
}
const playAudioFromButton = buttonElement => {
// Pause the audio
getAudioElementFromButton(buttonElement).play()
// Update element classes
buttonElement.classList.remove('fa-play')
buttonElement.classList.add('fa-pause')
}
audioButtons.forEach(audioButton => {
audioButton.addEventListener('click', () => {
// I get this first because I have to pause all the audios before doing anything, so I have to know it this audio was paused or not
const audioElement = getAudioElementFromButton(audioButton)
const audioIsPaused = audioElement.paused
// Stop all audios before starting this one
audioButtons.forEach(stopAudioFromButton)
audioIsPaused
?
playAudioFromButton(audioButton) // Play if it's paused
:
stopAudioFromButton(audioButton) // Pause if it's playing
})
})
buttonToStopAllAudios.addEventListener('click', () => {
audioButtons.forEach(stopAudioFromButton)
})
$('.control').on('mousedown', function() {
$(this).toggleClass('pause play');
});
$(document).on('keyup', function(e) {
if (e.which == 32) {
$('.control').toggleClass('pause play');
}
});
$('.control').on('mousedown', function() {
$(this).toggleClass('pause play');
});
$(document).on('keyup', function(e) {
if (e.which == 32) {
$('.control').toggleClass('pause play');
}
});
</script>
</div>
<!--Postamble for HTML Fragment frag_7-->
i have the code like this
Where is that code from? It doesn’t look at all like the code displayed on the CodePen page that you linked to originally, and there’s a typo in the name of the CSS property ‘transition-timing-function’ (which says ‘tiomig’ instead of ‘timing’ in the code as you’ve posted it here).
strawbs89 wrote:i have the code like this
Where is that code from? It doesn’t look at all like the code displayed on the CodePen page that you linked to originally, and there’s a typo in the name of the CSS property ‘transition-timing-function’ (which says ‘tiomig’ instead of ‘timing’ in the code as you’ve posted it here).
rite i've added the code as is
<!-- Header Code -->
<!--Header code for HTML Fragment frag_26 -->
<style>
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,800);
$background:#f9f9f9;
$foreground:#2c3e50;
$foreground-light:#34495e;
$size:50px;
$ratio:1.2;
$transition-time:0.3s;
body {
background: $background;
font-family: 'Open Sans', sans-serif;
text-align:center;
}
.play {
display:block;
width: 0;
height: 0;
border-top: $size solid transparent;
border-bottom: $size solid transparent;
border-left: ($size*$ratio) solid $foreground;
margin: ($size * 2) auto $size auto;
position:relative;
z-index:1;
transition: all $transition-time;
-webkit-transition: all $transition-time;
-moz-transition: all $transition-time;
left:($size*0.2);
&:before {
content:'';
position:absolute;
top:($size*-1.5);
left:($size*-2.3);
bottom:($size*-1.5);
right:($size*-0.7);
border-radius:50%;
border: ($size*0.2) solid $foreground;
z-index:2;
transition: all $transition-time;
-webkit-transition: all $transition-time;
-moz-transition: all $transition-time;
}
&:after {
content:'';
opacity:0;
transition: opacity ($transition-time * 2);
-webkit-transition: opacity ($transition-time * 2);
-moz-transition: opacity ($transition-time * 2);
}
&:hover, &:focus {
&:before {
transform: scale(1.1);
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
}
}
&.active {
border-color:transparent;
&:after {
content:'';
opacity:1;
width:($size);
height:($size*1.6);
background:$foreground;
position:absolute;
right: ($size*0.1);
top: ($size*-0.8);
border-left:($size*0.4) solid $foreground;
box-shadow:inset ($size*0.6) 0 0 0 $background;
}
}
}
h1 {
text-transform:uppercase;
color:$foreground-light;
letter-spacing:2px;
font-size:2em;
margin-bottom:0;
}
.headline {
display:block;
color:$foreground;
font-size:1.5em;
margin-bottom:1.5em;
}
.social {
text-decoration:none;
color:$foreground-light;
margin: 0.5em 1.5em;
display:inline-block;
&:hover, &:focus {
color:$foreground;
}
}
</style>
<!-- HTML Fragment frag_26 -->
<!--Preamble for HTML Fragment frag_26-->
<div __AddCode="here" style="position:absolute;left:0px;top:604px;width:303px;height:226px;/*Add Style*/">
<!--Body-->
<a href="#" title="Play video" class="play"></a>
<script>
$(document).ready(function() {
var icon = $('.play');
icon.click(function() {
icon.toggleClass('active');
return false;
});
});
</script>
</div>
<!--Postamble for HTML Fragment frag_26-->
now in html what do i put in order for audio to play
To use the codepen script you would also need to download font awesome and include it in your site.
A simpler way is use a play image and a pause image and put one on top of the other, add a couple of actions to each with an onclick line of javascript, and a tiny bit of css. See the attached file, pages Home and Three. Preview in a browser.
If you want to use it, do it the easy way. Slide one image off the other > copy both to your page. Copy the HTML fragment and paste on your page. Preview in a browser. If all OK double click the fragment and enter the names of your audio files.
Joe
To use the codepen script you would also need to download font awesome and include it in your site.
A simpler way is use a play image and a pause image and put one on top of the other, add a couple of actions to each with an onclick line of javascript, and a tiny bit of css. See the attached file, pages Home and Three. Preview in a browser.
If you want to use it, do it the easy way. Slide one image off the other > copy both to your page. Copy the HTML fragment and paste on your page. Preview in a browser. If all OK double click the fragment and enter the names of your audio files.
Joe
ok would that work with both desktop and mobile versions?
which actions would i have to use?
To use the codepen script you would also need to download font awesome and include it in your site.
A simpler way is use a play image and a pause image and put one on top of the other, add a couple of actions to each with an onclick line of javascript, and a tiny bit of css. See the attached file, pages Home and Three. Preview in a browser.
If you want to use it, do it the easy way. Slide one image off the other > copy both to your page. Copy the HTML fragment and paste on your page. Preview in a browser. If all OK double click the fragment and enter the names of your audio files.
Joe
also i'm pushing play yes that works but can't pause it i have done what you've said
i've put it on my site
also i'm pushing play yes that works but can't pause it i have done what you've said
i've put it on my site
Separate the two buttons and try it again. If it works place the play button on top of the pause button and bring the play button to the front and preview again.
If it fails upload a single page project file with the butons and fragment on it, with your next post.
Joe
Separate the two buttons and try it again. If it works place the play button on top of the pause button and bring the play button to the front and preview again.
If it fails upload a single page project file with the butons and fragment on it, with your next post.
Joe
also i'm pushing play yes that works but can't pause it i have done what you've said
i've put it on my site but can't pause
element
<audio id="myAudio"
<source src="http://media.w3.org/2010/07/bunny/04-Death_Becomes_Fur.mp4"
type="audio/mp4">
<source src="http://media.w3.org/2010/07/bunny/04-Death_Becomes_Fur.oga"
type="audio/ogg";>
Your browser does not support the HTML5 Audio element.
</audio>
it plays and pauses on this page
but not on my jj2.wpp
it plays and pauses on this page
but not on my jj2.wpp
A couple of issues on your page.
1. Staff Schedule fragment -
a. You had included head and body tags with the code and pasted it into Body. I've copied your original fragment and placed it on the pasteboard for reference. The one that's on the page I've separated the head and body coding and moved them to the correct places.
b. The audio still would not work as expected. This was due a conflict between two different versions of Jquery, v3.5.1 in the staff schedule fragment and 1.11.1 which Webplus uses for the show/hide actions of the audio buttons. To remedy I've removed the actions from the buttons and put a small jquery script in the fragment.
File attached.
Joe
strawbs89 wrote:it plays and pauses on this page
but not on my jj2.wpp
A couple of issues on your page.
1. Staff Schedule fragment -
a. You had included head and body tags with the code and pasted it into Body. I've copied your original fragment and placed it on the pasteboard for reference. The one that's on the page I've separated the head and body coding and moved them to the correct places.
b. The audio still would not work as expected. This was due a conflict between two different versions of Jquery, v3.5.1 in the staff schedule fragment and 1.11.1 which Webplus uses for the show/hide actions of the audio buttons. To remedy I've removed the actions from the buttons and put a small jquery script in the fragment.File attached.
Joe
thank you but it's telling me it caan't find the files you have put in there
do you have the files?
Joe wrote:strawbs89 wrote:it plays and pauses on this page
but not on my jj2.wpp
A couple of issues on your page.
1. Staff Schedule fragment -
a. You had included head and body tags with the code and pasted it into Body. I've copied your original fragment and placed it on the pasteboard for reference. The one that's on the page I've separated the head and body coding and moved them to the correct places.
b. The audio still would not work as expected. This was due a conflict between two different versions of Jquery, v3.5.1 in the staff schedule fragment and 1.11.1 which Webplus uses for the show/hide actions of the audio buttons. To remedy I've removed the actions from the buttons and put a small jquery script in the fragment.File attached.
Joe
thank you but it's telling me it caan't find the files you have put in there
do you have the files?
not to worry i'v found em
also does that script accept mpeg links
this is a fake example: http://elfbar.com/stream
also does that script accept mpeg links
this is a fake example: http://elfbar.com/stream
Try it and see.
Joe
strawbs89 wrote:also does that script accept mpeg links
this is a fake example: http://elfbar.com/stream
Try it and see.
Joe
i'v been working alot more on my site
but the play/pause buttons work but no sound on mobile device
there's sound on laptop but not mobile. wondering if you could try it out
https://coolvibes-reloaded.com
i'v been working alot more on my site
but the play/pause buttons work but no sound on mobile device
there's sound on laptop but not mobile. wondering if you could try it out
https://coolvibes-reloaded.com
Play/pause works on my iphone.
Joe
Joe wrote:strawbs89 wrote:also does that script accept mpeg links
this is a fake example: http://elfbar.com/stream
Try it and see.
Joe
i'v been working alot more on my site
but the play/pause buttons work but no sound on mobile device
there's sound on laptop but not mobile. wondering if you could try it out
https://coolvibes-reloaded.com
Play/Pause does not work on my Samsung Galaxy S9 ..
This is a summary of your page by Google
https://search.google.com/test/mobile-f … hGHoFl_94w
Joe
Alfred's Serif Users' Forums → WebPlus → WebPlus X8 Audio Player(Add On From 2013s Post)
Powered by PunBB, supported by Informer Technologies, Inc.