Html Play Audio On Image Click

| 17-08-2021
[RAND-1-100] Comments

Sun, May 4, 2014

Html Play Audio On Image Click Check

This tutorial details how JavaScriptpt, HTML, and CSS can be used to make a custom HTML5 audio interface. It is divided into three sections.

  1. The Play Button
  2. Track Progress
  3. Changing Track Position

Here is the code for the audio element that we will be controlling.

PLAY BUTTON

First we will use HTML to create the play button.We will make two CSS classes, play and pause.

  1. Play – the background property is a play icon
  2. Pause – the background property is a pause icon

CODE FOR CLASSES AND BUTTON

Click

To make our play button function, we write onclick=“playAudio” inside the button’s opening tag. This means the playAudio function is called whenever pButton is clicked. The function toggles between the .play and .pause classes and plays and pauses the audio.

The playAudio function checks if the audio is paused. If the audio is paused we call the audio element’s play function. We clear pButton’s classes and add the pause class.If the audio is playing we pause it and change pButton’s class to play.

That is all the code you need to make a play button that targets the audio element.

Functions like play and pause are part of the HTMLMediaElement’s interface. If you are interested the API is here.

Use Skin Machine to design a player without compromises. Skin Machine itself is based on pure HTML5, Javascript and CSS, so what you see is truely what you get. Use Skin Machine to create: - Wimpy Player Skins - Wimpy Button CSS Classes - Standard CSS and HTML for any other purposes (using the 'export' features in the logo menu.) Launch Skin. Audio controls autoplay Your browser does not support the audio element. With the CSS you can style the songPlay div anyway you like. For example, you can define a background color, image, etc. With the HTML, all you have to do is define the “songPlay” div and then define the onclick action handler to call the play function and pass the id of the audio tag. The pause button has a very simple function.

TRACK PROGRESS

Before we can start tracking the progress of the audio, we should modify our HTML. Instead of just having a play button, we will create an audio player. We will nest the button, a timeline, and a playhead inside of a div whose id will be audioplayer.

Here is the HTML and CSS. You should also add the float:left property to the play button.

The audio player should look something like this

The next step is to write JavaScript that will move the playhead as the track advances. This is accomplished by adding an event listener for timeupdate that triggers a function that moves the playhead the appropriate amount. In order for time update to work we will also need to get the duration of the audio file. The code is also below.

CHANGING TRACK POSITION

There are two ways that we will allow users to change the track position.

  • Clicking on the timeline
  • Dragging the playhead

The first method is accomplished by listening for clicks on the timeline, calculating the click’s position as a percent of the timeline’s width, and updating the playhead and track positions.

Audio

The code above adds an event listener to the timeline. If the timeline is clicked, this function fires which moves the playhead to the click position and updates the track’s current time.

The moveplayhead function works by changing the playhead’s left margin. The left margin controls the space between the left side of the timeline and the playhead. To calculate the correct left margin value, the x-coordinate of the click event is subtracted by the timeline’s left offset. The left offset is calculated with getPosition.

The conditionals are necessary if the you want to support playhead dragging. If you don’t, just set the playhead’s left margin to newMarginLeft, as any click will be inside the timeline.

The codepen below puts everything together.

Html Play Audio On Image Click

See the Pen HTML5 Audio Player by Alex Katz (@katzkode) on CodePen.

Html Play Audio On Image Click Test

If you are interested in using multiple audio players on the same page, you can check out my code here – Multiple HTML5 Audio Players.