Link to audio - listen on same page

HTML & CSS
1

Hi,
Is it possible to use an image as a link to an audio file - and have the audio play while still on the page with the image? Currently when the image is clicked the player replaces the initial image/link page. Here’s the code I’m using.

<a href="pathtomp3file.mp3"><img src="pathtoimage.jpg"></a>

The audio is a message from the person in the image. I would like the user to continue to view the person’s image as the message plays.

I know that I can use an audio player on the page - but want to the image to start the audio.

Hope that makes sense.

Thanks!

2

Here is one way:

<audio id="person1" src="pathtomp3file.mp3"></audio>
<img src="pathtoimage.jpg" onclick="document.getElementById('person1').play()">

However I think the user should be able to stop the audio playing.

2 Likes
3

That could be done in the onclick event by checking if the audio is playing and starting or stopping it as appropriate.

Better, too, to use an event listener than an inline click event.

1 Like
4

Thanks! I agree the user should have control of the audio.

How is that done, please? Both. :slight_smile:
Thanks!

5

How are visitors to your website going to know that they can hear audio if they click on the image?

You could place an HTML audio player (with controls) just under the image and the with same width as the image. If the width of the player is insufficient to display the normal controls, some controls will automatically not be displayed. Note that browsers display very different styles of audio player (I don’t like the player in Chrome). If you use an HTML player, there is no need to add your own code to control the starting and stopping.

You could have some sort of button to start the audio playing. For example, you could have a “Listen” button that changes to a “Stop” button when the audio starts playing. JavaScript would be required for that.

I illustrate these two options below but there are other options:

audio1

2 Likes
6

Hi Archibald,
Some of our users have trouble with technology, to be nice. We’ve had other similar audio messages in the past, with the player displayed - we’ve gotten messages that it didn’t work for me, nothing happens when it’s clicked, etc… a little support from us generally revealed user error or lack of technical savvy. We were hoping to avoid all of that with a simple image link to audio. Which is do-able. The icing here would be if the image was to remain visible. Here’s a link to the beta page at the moment. I think I will add a player below the image as well.
https://ktbb.com/afterrush/failla.php
(current audio is for test purposes only)
Thanks!

7
  1. Remove the <a> element (including href attribute) that is currently enclosing the image (as post #2 above);
  2. To the image element, add "onclick="document.getElementById('person1').play()" (as post #2 above);
  3. To the player that you have added below the image add attribute id="person1" (as post #2 above).

Choose some other id if you wish!

Use an event listener instead of the onclick attribute if you want more professional code that does the same thing.

We could look to change the play arrow on the image to a pause symbol when the audio starts playing but that would take more work :grinning:

1 Like
8

Hey - the onclick event will do perfectly - thanks!

Daf

9

BTW: your MENU≡ is nearly disappearing at some browser widths.

1 Like
10

Yes, I’ve seen that, too. I’ve got a redesign in process to help with the mobile aspect.
Thanks again!

12

Yes, the mobile menu seems OK now.

On the desktop menu the down arrows are rather feint and if you click on one you get an error.

13

No other pages completed just yet - so that’w why the 404.

Thanks!
Daf

14

Just for fun I’ve got the ‘play’ button to change to a ‘pause’ button:

Note: to display within the Codepen I have restricted the width to 512 pixels by wrapping in a div.

It’s probably still better to display the player controls so the user can see progress and can control volume (except on small screens).

1 Like
15

Ah, very clever! Thanks!

16

Unfortunately, the controls are not keyboard-accessible. frown

2 Likes
17

Good point!

I understand the HTML audio element controls are not really accessible either.

We could add buttons for accessibility but it would be good if a transcript were available on the radio station website.

18

Something like this? It’s what I have used for a video, so not tested on an audio element.

document.addEventListener("keydown", function(e) {
  if (e.code === "KeyK" && !e.ctrlKey && !e.altKey) {
    const v = document.querySelector("audio"),
      k = document.querySelector("#keyk");
    if (v.paused) {
      v.play(); 
      k.innerHTML = "pause";
    } else {
      v.pause();
      k.innerHTML = "resume";
    }
  }
});
19

My comment above that audio element controls are not really accessible was based on this from MDN (link)

However, there are problems with these controls:
They are not keyboard-accessible in most browsers, i.e. you can’t tab between the controls inside the native player. Opera and Chrome provide this to some degree, but it still isn’t ideal.

Perhaps that information is out of date because I find I can tab between controls. Also the arrow keys work for volume and forward/rewind.

I think my Codepen above can be made accessible for keyboard users (without displaying player controls) by putting the <svg> elements in <button> elements so keyboard users can tab to them.

How do keyboard users know they have to press keyboard key “K”?

Is your element with ID “keyk” a <button>?

20

You have a little message that says something like “Press k to pause”, or “Press k to play” - the play/pause part having an id keyk. It could be a button but it doesn’t have to be.

21

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.