1 Topic by strawbs89 (edited by strawbs89 2023-02-22 18:55:41)

  • Registered: 2023-02-12
  • Posts: 30

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?

  • Alfred
  • Alfred
  • Administrator
  • Offline
  • Registered: 2022-01-21
  • Posts: 1,333

Re: WebPlus X8 Audio Player(Add On From 2013s Post)

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?

"Has it ever struck you that life is all memory, except for the one present moment that goes by you so quick you hardly catch it going?"
― Tennessee Williams
  • Registered: 2023-02-12
  • Posts: 30

Re: WebPlus X8 Audio Player(Add On From 2013s Post)

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

  • Alfred
  • Alfred
  • Administrator
  • Offline
  • Registered: 2022-01-21
  • Posts: 1,333

Re: WebPlus X8 Audio Player(Add On From 2013s Post)

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.

"Has it ever struck you that life is all memory, except for the one present moment that goes by you so quick you hardly catch it going?"
― Tennessee Williams
  • Registered: 2023-02-12
  • Posts: 30

Re: WebPlus X8 Audio Player(Add On From 2013s Post)

Alfred wrote:
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-->
  • Alfred
  • Alfred
  • Administrator
  • Offline
  • Registered: 2022-01-21
  • Posts: 1,333

Re: WebPlus X8 Audio Player(Add On From 2013s Post)

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).

"Has it ever struck you that life is all memory, except for the one present moment that goes by you so quick you hardly catch it going?"
― Tennessee Williams
  • Registered: 2023-02-12
  • Posts: 30

Re: WebPlus X8 Audio Player(Add On From 2013s Post)

Alfred wrote:
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

  • Joe
  • Joe
  • Member
  • Offline
  • From: Cornwall
  • Registered: 2022-01-23
  • Posts: 144

Re: WebPlus X8 Audio Player(Add On From 2013s Post)

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

Post's attachments

AudioButton2X8.wpp 47.68 kb, 3 downloads since 2023-03-04 

You don't have the permssions to download the attachments of this post.
I used to be indecisive, now I'm not so sure.
  • Registered: 2023-02-12
  • Posts: 30

Re: WebPlus X8 Audio Player(Add On From 2013s Post)

Joe wrote:

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?

  • Registered: 2023-02-12
  • Posts: 30

Re: WebPlus X8 Audio Player(Add On From 2013s Post)

Joe wrote:

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

11 Reply by Joe

  • Joe
  • Joe
  • Member
  • Offline
  • From: Cornwall
  • Registered: 2022-01-23
  • Posts: 144

Re: WebPlus X8 Audio Player(Add On From 2013s Post)

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

I used to be indecisive, now I'm not so sure.
  • Registered: 2023-02-12
  • Posts: 30

Re: WebPlus X8 Audio Player(Add On From 2013s Post)

Joe wrote:

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
https://i.postimg.cc/hf0PNSXh/circle-play-regular.png



https://i.postimg.cc/7JnwvVYj/circle.png


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>

Post's attachments

jj2.wpp 1004.41 kb, 2 downloads since 2023-03-05 

You don't have the permssions to download the attachments of this post.

13 Reply by strawbs89 (edited by strawbs89 2023-03-05 15:59:04)

  • Registered: 2023-02-12
  • Posts: 30

Re: WebPlus X8 Audio Player(Add On From 2013s Post)

it plays and pauses on this page

but not on my jj2.wpp

14 Reply by Joe

  • Joe
  • Joe
  • Member
  • Offline
  • From: Cornwall
  • Registered: 2022-01-23
  • Posts: 144

Re: WebPlus X8 Audio Player(Add On From 2013s Post)

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

Post's attachments

jj2(1).wpp 1 mb, 1 downloads since 2023-03-05 

You don't have the permssions to download the attachments of this post.
I used to be indecisive, now I'm not so sure.
  • Registered: 2023-02-12
  • Posts: 30

Re: WebPlus X8 Audio Player(Add On From 2013s Post)

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?

  • Registered: 2023-02-12
  • Posts: 30

Re: WebPlus X8 Audio Player(Add On From 2013s Post)

strawbs89 wrote:
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

  • Registered: 2023-02-12
  • Posts: 30

Re: WebPlus X8 Audio Player(Add On From 2013s Post)

also does that script accept mpeg links

this is a fake example: http://elfbar.com/stream

18 Reply by Joe

  • Joe
  • Joe
  • Member
  • Offline
  • From: Cornwall
  • Registered: 2022-01-23
  • Posts: 144

Re: WebPlus X8 Audio Player(Add On From 2013s Post)

strawbs89 wrote:

also does that script accept mpeg links

this is a fake example: http://elfbar.com/stream

Try it and see.

Joe

I used to be indecisive, now I'm not so sure.
  • Registered: 2023-02-12
  • Posts: 30

Re: WebPlus X8 Audio Player(Add On From 2013s Post)

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

20 Reply by Joe

  • Joe
  • Joe
  • Member
  • Offline
  • From: Cornwall
  • Registered: 2022-01-23
  • Posts: 144

Re: WebPlus X8 Audio Player(Add On From 2013s Post)

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

I used to be indecisive, now I'm not so sure.
  • Registered: 2022-06-20
  • Posts: 288

Re: WebPlus X8 Audio Player(Add On From 2013s Post)

strawbs89 wrote:
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 ..

22 Reply by Joe

  • Joe
  • Joe
  • Member
  • Offline
  • From: Cornwall
  • Registered: 2022-01-23
  • Posts: 144

Re: WebPlus X8 Audio Player(Add On From 2013s Post)

This is a summary of your page by Google

https://search.google.com/test/mobile-f … hGHoFl_94w

Joe

I used to be indecisive, now I'm not so sure.