Welcome to TalkGraphics.com
Page 1 of 2 12 LastLast
Results 1 to 10 of 12
  1. #1

    Default Audio Video with graphic

    I added an MP3 to a website. Client wanted a picture of a speaker (wants the look of Merriam Webster online dictionary) linked to the audio without seeing the audio ... so that, when that speaker is clicked, the audio plays. I thought I had done something similar a few years ago but I can't remember how and I can't seem to find anything in other post about this. I'm attaching a picture of what I have.


    Click image for larger version. 

Name:	Audio video.png 
Views:	116 
Size:	40.8 KB 
ID:	119293

  2. #2
    Join Date
    Apr 2004
    Location
    California, USA
    Posts
    222

    Default Re: Audio Video with graphic

    I'm looking for the same answer. HTML5 apparently now has support for audio, just now figured it out... you just drag an mp3 file into the window and a popup asks you if you want the site to autostart the sound when the page loads or if you want a small control bar for it for manual control. Problem I'm having is the control bar is visible... I don't want to see it. I want the brief sound to start when the page is loaded and that's it.. I don't need and don't want to see a control bar on the page. And, yes, I did check the box to have the sound auto start.

    Also I would like to know is if there is a way to get sounds attached to buttons or other objects when they are pushed/clicked or moused over.. click sounds, etc.
    Gigabyte GA-Z68A-D3H-B3 LGA1155 Intel Z68 ATXMOB - Intel core I7-2600 3.4GH LGA 1155 - 16gb DDR3 SDRAM - Corsair CX750M PS - GeForce GTX650 2GB - SB X-Fi Extreme Music
    Master C: Crucial 200GB SSD - Master D: 1.0 TB - E: 24x DVD/CD R/RW - F: Crucial 275GB SSD - Windows 7 Pro 64bit SP1

  3. #3
    Join Date
    Aug 2000
    Location
    Harwich, Essex, England
    Posts
    21,895

    Default Re: Audio Video with graphic

    Problem I'm having is the control bar is visible... I don't want to see it. I want the brief sound to start when the page is loaded and that's it.. I don't need and don't want to see a control bar on the page.
    If it's set to autoplay just place a rectangle matching your page background above it.
    Egg

    Intel i7 - 4790K Quad Core + 16 GB Ram + NVIDIA Geforce GTX 1660 Graphics Card + MSI Optix Mag321 Curv monitor
    + Samsung 970 EVO Plus 500GB SSD + 232 GB SSD + 250 GB SSD portable drive + ISP = BT + Web Hosting = TSO Host

  4. #4
    Join Date
    Apr 2012
    Location
    SW England
    Posts
    17,743

    Info Re: Audio Video with graphic

    Quote Originally Posted by doane View Post
    Also I would like to know is if there is a way to get sounds attached to buttons or other objects when they are pushed/clicked or moused over.. click sounds, etc.
    yes there is.

    Drop your MP3 onto your design canvas.
    Decline AutoPlay.

    Select the Audio Control bar and open its Placeholder body.
    Remove the word controls and add an id. My example: <audio class="xar_meplayer" id="lorryreverse" src="index_htm_files/car.mp3" width = "100%" height="100%"/>
    Resize the control to 30 x 30 px.
    Keep it handy.

    Now create a button or text link. here I am just going to describe a button with a click link.
    In Link > Link to Web or Email address, put: javascript: document.getElementById("lorryreverse").play();

    You can now do one of two things:

    1. Hide the control under the button and soft group both.
    2. Place the control to the right. I recommend this as when either it or the button is clicked, the Pause control is shown so a punter can quickly kill the raucous noise. Again, soft-group to keep things together.

    Acorn
    Acorn - installed Xara software: Cloud+/Pro+ and most others back through time (to CC's Artworks). Contact for technical remediation/consultancy for your web designs.
    When we provide assistance, your responses are valuable as they benefit the community. TG Nuggets you might like. Report faults: Xara Cloud+/Pro+/Magix Legacy; Xara KB & Chat

  5. #5
    Join Date
    Apr 2004
    Location
    California, USA
    Posts
    222

    Default Re: Audio Video with graphic

    Quote Originally Posted by Acorn View Post
    yes there is.

    Drop your MP3 onto your design canvas.
    Decline AutoPlay.

    Select the Audio Control bar and open its Placeholder body.
    Remove the word controls and add an id. My example: <audio class="xar_meplayer" id="lorryreverse" src="index_htm_files/car.mp3" width = "100%" height="100%"/>
    Resize the control to 30 x 30 px.
    Keep it handy.

    Now create a button or text link. here I am just going to describe a button with a click link.
    In Link > Link to Web or Email address, put: javascript: document.getElementById("lorryreverse").play();

    You can now do one of two things:

    1. Hide the control under the button and soft group both.
    2. Place the control to the right. I recommend this as when either it or the button is clicked, the Pause control is shown so a punter can quickly kill the raucous noise. Again, soft-group to keep things together.

    Acorn
    Wow, thanks for the quick replies.

    EB: I had tried hiding it under another image, but didn't like not knowing where it is and then couldn't figure out how to bring back to the front

    Acorn: Thanks so much, will try that out... maybe a dumb question, but what does "soft group" both mean? ...Just learning Webdesigner 15
    Gigabyte GA-Z68A-D3H-B3 LGA1155 Intel Z68 ATXMOB - Intel core I7-2600 3.4GH LGA 1155 - 16gb DDR3 SDRAM - Corsair CX750M PS - GeForce GTX650 2GB - SB X-Fi Extreme Music
    Master C: Crucial 200GB SSD - Master D: 1.0 TB - E: 24x DVD/CD R/RW - F: Crucial 275GB SSD - Windows 7 Pro 64bit SP1

  6. #6
    Join Date
    Apr 2012
    Location
    SW England
    Posts
    17,743

    Default Re: Audio Video with graphic

    Quote Originally Posted by doane View Post
    Acorn: Thanks so much, will try that out... maybe a dumb question, but what does "soft group" both mean? ...Just learning Webdesigner 15
    Select two or more shapes and use Arrange > Apply Soft Group. This keeps the Shapes as their original image, widget, button, text, links or whatever across any number of layers and doesn't just munge them together flattening then out and ruining their original purpose. Soft-grouped items as selected as one, move as one but can be Ctrl+Selected to change any.

    It is actually one of Xara's more clever utilities.

    Acorn
    Acorn - installed Xara software: Cloud+/Pro+ and most others back through time (to CC's Artworks). Contact for technical remediation/consultancy for your web designs.
    When we provide assistance, your responses are valuable as they benefit the community. TG Nuggets you might like. Report faults: Xara Cloud+/Pro+/Magix Legacy; Xara KB & Chat

  7. #7
    Join Date
    Mar 2009
    Posts
    4,501

    Default Re: Audio Video with graphic

    You can find a good explanation in Help/Help Web Designer Premium and type "Soft groups".

  8. #8
    Join Date
    Apr 2004
    Location
    California, USA
    Posts
    222

    Default Re: Audio Video with graphic

    OK, thanks everyone
    Gigabyte GA-Z68A-D3H-B3 LGA1155 Intel Z68 ATXMOB - Intel core I7-2600 3.4GH LGA 1155 - 16gb DDR3 SDRAM - Corsair CX750M PS - GeForce GTX650 2GB - SB X-Fi Extreme Music
    Master C: Crucial 200GB SSD - Master D: 1.0 TB - E: 24x DVD/CD R/RW - F: Crucial 275GB SSD - Windows 7 Pro 64bit SP1

  9. #9
    Join Date
    Apr 2004
    Location
    California, USA
    Posts
    222

    Default Re: Audio Video with graphic

    Just figured out an easier and different way to do it using the HTML5 <audio> tag. Incidentally, mp3 audio is supported in all browsers, wav files in all but Windows Explorer, and ogg is supported in Chrome, Firefox and Opera only.
    I drag a mp3 into the window and then I right click, Edit Widget --> Placeholder Tab open the HTML code body and edit the text as follows:

    <audio autoplay><source src="index_htm_files/chalkb2b.mp3" type="audio/mpeg"></audio>

    Now I can see the control in the window when I'm working, but when the page loads in a browser there is no control and the audio loads with the page.

    Here was how the original Xara code looked for comparison:

    When autostart is chosen when it's dropped into the page:
    <audio class="xar_meplayer" src="index_htm_files/chalkb2b.mp3" controls autoplay width = "100%" height="100%"/>

    And when NO autostart is chosen:
    <audio class="xar_meplayer" src="index_htm_files/chalkb2b.mp3" controls width = "100%" height="100%"/>
    Last edited by doane; 14 March 2018 at 01:29 AM. Reason: more info
    Gigabyte GA-Z68A-D3H-B3 LGA1155 Intel Z68 ATXMOB - Intel core I7-2600 3.4GH LGA 1155 - 16gb DDR3 SDRAM - Corsair CX750M PS - GeForce GTX650 2GB - SB X-Fi Extreme Music
    Master C: Crucial 200GB SSD - Master D: 1.0 TB - E: 24x DVD/CD R/RW - F: Crucial 275GB SSD - Windows 7 Pro 64bit SP1

  10. #10
    Join Date
    Apr 2012
    Location
    SW England
    Posts
    17,743

    Info Re: Audio Video with graphic

    Quote Originally Posted by doane View Post
    Just figured out an easier and different way to do it using the HTML5 <audio> tag. Incidentally, mp3 audio is supported in all browsers, wav files in all but Windows Explorer, and ogg is supported in Chrome, Firefox and Opera only.
    I drag a mp3 into the window and then I right click, Edit Widget --> Placeholder Tab open the HTML code body and edit the text as follows:

    <audio autoplay><source src="index_htm_files/chalkb2b.mp3" type="audio/mpeg"></audio>

    Now I can see the control in the window when I'm working, but when the page loads in a browser there is no control and the audio loads with the page.

    Here was how the original Xara code looked for comparison:

    When autostart is chosen when it's dropped into the page:
    <audio class="xar_meplayer" src="index_htm_files/chalkb2b.mp3" controls autoplay width = "100%" height="100%"/>

    And when NO autostart is chosen:
    <audio class="xar_meplayer" src="index_htm_files/chalkb2b.mp3" controls width = "100%" height="100%"/>
    I far as I can read the change you made without running it you have factored our the source MP3 and expanded the <AUDIO /> syntax into <AUDIO></AUDIO>. In doing so, you have removed the controls parameter as I suggested and a side-effect is the AUDIO placeholder not longer has a source parameter so is not rendered. This is fine for for AutoPlay but no otherwise unless you have followed my other suggestion to associate the button click action to the ID of the MP3. Your current solution cannot achieve this last action: "Also I would like to know is if there is a way to get sounds attached to buttons or other objects when they are pushed/clicked or moused over.. click sounds, etc." & "Audio Video with graphic".

    Xara are using the AUDIO tag already. Your variation is normal when you have multiple audio formats that allows you to better target the end listeners browser.

    e.g.:
    <audio controls autoplay>
    <source src="horse.ogg" type="audio/ogg">
    <source src="horse.mp3" type="audio/mpeg">
    Your browser does not support the audio element.
    </audio>
    The AUDIO tag is not supported in Internet Explorer 8 and earlier versions.

    I am glad you have something that works for you.

    Acorn

    P.S. I would strongly suggest never to use autoplay for long tracks without warning. It is OK for sound effects like button clicks and the occasional rollover. Too much and you drive off custom.
    Acorn - installed Xara software: Cloud+/Pro+ and most others back through time (to CC's Artworks). Contact for technical remediation/consultancy for your web designs.
    When we provide assistance, your responses are valuable as they benefit the community. TG Nuggets you might like. Report faults: Xara Cloud+/Pro+/Magix Legacy; Xara KB & Chat

 

 

Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •