Audio Widget won't resize when dragged

[XByrne]

I'm making the mobile version of my website, and the Audio Widget looks too small when previewed at mobile phone size. (The widget was generated when I dragged an mp3 audio file from my desktop onto the Web Designer page.)

I've tried resizing it to make it bigger, by dragging a corner. But there's a lot of 'whirling' going on, then the space where it was turns white, then it reappears exactly the same size as before.

Is there a way to resize the Audio Widget?

Thanks in advance,

Seamus

[Acorn]

I'm making the mobile version of my website, and the Audio Widget looks too small when previewed at mobile phone size. (The widget was generated when I dragged an mp3 audio file from my desktop onto the Web Designer page.)
I've tried resizing it to make it bigger, by dragging a corner. But there's a lot of 'whirling' going on, then the space where it was turns white, then it reappears exactly the same size as before.
Is there a way to resize the Audio Widget?
Thanks in advance, Seamus

Seamus, as this is happening on the design page, why does it matter?
It is what is published that counts. What does the Mobile control look like when it is enlarged?

When I drag a corner I get a regenerated placeholder image so perhaps just untick the Placeholder > Edit: Regnerate and ignore what it shows.

Acorn

[Initiostar]

The simplest way is to use the browsers own audio controls (and bypass Xara's widget).

Create any size rectangle as a placeholder, add this code to the HTML body and your mp3 file. Copy the MP3 file into the same folder as your exported website (alongside the index-htm_files, index.htm etc.)

<audio controls>
  <source src="MySong.mp3" type="audio/mpeg">
</audio>

You will now use the browsers own audio controls which work fine.

You can also directly export the mp3 to your server and change the scr= https://initiostar.co.uk/demo/Gr%c3%..._No_Choir_.mp3

Depending on which browser you use you will see the browsers own audio controls.

Gary

[XByrne]

Thanks again, Acorn and Gary!

I'll try those suggestions. I'm very glad I found this forum!

Seamus

[XByrne]

Seamus, as this is happening on the design page, why does it matter?
It is what is published that counts. What does the Mobile control look like when it is enlarged?

When I drag a corner I get a regenerated placeholder image so perhaps just untick the Placeholder > Edit: Regnerate and ignore what it shows.

Acorn

Hi Acorn,

Unchecking the 'Regenerate' box enabled the graphic to be resized without any problem. But when firstly previewed and later on exported and played in Edge Chromium browser, the audio player retains the same size, not resized.

Seamus

[XByrne]

The simplest way is to use the browsers own audio controls (and bypass Xara's widget).

Create any size rectangle as a placeholder, add this code to the HTML body and your mp3 file. Copy the MP3 file into the same folder as your exported website (alongside the index-htm_files, index.htm etc.)

<audio controls>
  <source src="MySong.mp3" type="audio/mpeg">
</audio>

You will now use the browsers own audio controls which work fine.

You can also directly export the mp3 to your server and change the scr= https://initiostar.co.uk/demo/Gr%c3%..._No_Choir_.mp3

Depending on which browser you use you will see the browsers own audio controls.

Gary

Hi Gary,

I tried all that - just a rectangle with your code embedded in HTML Body. My results: Xara preview shows a huge audio player, so I ignored that and opened the exported website in Edge Chromium. A very nice player appeared which works fine.
On further examination, I find that the player is fixed at 300 x 54px in the browser. Regardless of what size I make my rectangle placeholder, the browser plays the aforementioned size. Not a problem as such - I can design around that size, and it doesn't change for mobile or desktop variants. But, will every browser supply a 300 x 54px player?

Also, I notice the 'Xara' player, when pressed to play on iPhone and iPad, causes a black screen to appear with a grey player in the middle of the screen, which I again have to press. Will that happen with the '300 x54px' version too?

Seamus

[Acorn]

Hi Acorn,
Unchecking the 'Regenerate' box enabled the graphic to be resized without any problem. But when firstly previewed and later on exported and played in Edge Chromium browser, the audio player retains the same size, not resized.
Seamus

Thanks for clarifying.

To achieve the same as what Gary suggests, still use the Xara mechanism to drop your MP3 onto the page.
Edit Widget and just delete the class contents (within the double quotes).

To scale up is more tricky.

Edit Widget and add id="control01" for the first "control02" for the next and so on. E.g.:

<audio id="control01" class="" src="index_htm_files/Adagio.mp3" controls autoplay width = "100%" height="100%"/>

<audio id = "control02" controls>
  <source src="index_htm_files/Adagio.mp3" type="audio/mpeg">
</audio>

In Website > HTML Code (head) [Source: https://stackoverflow.com/questions/...or-audio-tag]:

<style>
  #control01:hover, #control01:focus, #control01:active
, #control02:hover, #control02:focus, #control02:active {
  box-shadow: 15px 15px 20px rgba(0,0, 0, 0.4);
  transform: scale(1.5);
}


#control01, #control02 {
  transition:all 0.5s linear;
  box-shadow: 2px 2px 4px 0px #006773;
  border-radius:7px 7px 7px 7px ;
  transform: scale(1.4);
}
</style>

In Website > HTML Code (body):

<script>
  document.getElementById('control01').parentNode.style.overflow = "unset";
  document.getElementById('control02').parentNode.style.overflow = "unset";
</script>

I have not tweaked this code specifically for a Variant but hopefully you can see how it holds together. Just add new control IDs for each new audio player you add.

Acorn

P.S. Does not fully work with IE

[XByrne]

Thanks for that, Acorn! I'm experimenting with the code.

I'm getting the same browser player that Gary suggested. So, that's in Edge Chromium. Will Google Chrome, Safari, Firefox, etc. product the same size 300x54px player in those browsers?

Seamus

[XByrne]

Hi Gary,

More testing with the browser player... I added a piece of music to my website, then copied it to my mobile variant. Then published the test page.

The page appears 'doubled' in the browser, literally two pages kindof beside each other, complete with two audio players.

Is there a way around that?

Thanks

Seamus

[Acorn]

Hi Gary,
More testing with the browser player... I added a piece of music to my website, then copied it to my mobile variant. Then published the test page.
The page appears 'doubled' in the browser, literally two pages kindof beside each other, complete with two audio players.
Is there a way around that?
Thanks Seamus

Seamus, you will not have closed off the code properly somewhere.

I have checked my code in a Variant and it works fine so Gary's approach is equally OK.

If you are keen or locking the width to one identical across all browsers I think you will be in for a long haul.

Acorn

P.S. Ensure you remove autoplay as there is:

1. Having someone else's noise hit your ears unannounced.
2. Having it restart every change between shifting Variants.