HTML5 audioaudio attribute

  Audio, html5

Audio’s control functions mainly include:

load()When loading audio and video software, it is usually unnecessary to call, unless it is a dynamically generated element to preload before playing.
play()Load and play audio and video files, unless the files have been suspended in other locations, the default restart starts playing
pause()Pause audio and video files in the playing state

Audio’s read-only media features are:

durationGets the playback duration of the media file, in s; otherwise,NaN
pausedIf the media file is suspended, returntrue, otherwise returnfalse
endedIf the media file is played, it returnstrue
startTimeReturns the starting playback time, usually 0.0, unless it is a buffered media file and part of the content is no longer in the buffer
errorError code returned after an error has occurred
currentSrcReturns the file being played or loaded as a string, corresponding to the browser’ssourceThe file selected in the element

AudioScriptable Property Values:

autoplayAutomatically play loaded media files or query whether it is set toautoplay
loopSet the media file to loop, or query if it is set toloop
currentTimeReturns the time elapsed from the start of playback to the present in s units, or it can be setcurrentTimeTo jump to a specific location
controlsShow or hide the user control interface
volumeSet the volume value between 0.0 and 1.0, or query the current volume value
mutedSet whether to mute
autobufferWhether to load the media file buffer before playing, if soautoplayThis attribute is ignored

Song playback progress

This function usesaudio apiThe main ones are:

currentTime(): Returns the time elapsed from the start of playback to the present in seconds. It can also be setcurrentTimeTo jump to a specific location;
duration: Gets the playback duration of the media file in seconds; otherwise,NaN;

Song Progress: First, set a timer to obtain these two values respectively, divide the number of seconds currently played by the total number of seconds of the song, and then multiply by the total width of the song progress bar (px), you can calculate how much the song progress bar can walk in a second.

Song Progress Adjustment: Click on a certain position of the progress bar, and the song jumps to the response position. This function is realized by first obtaining the length of the clicked position from the leftmost part of the progress bar (letFirefoxSupportoffsetXoffsetY), then get the percentage of this distance in the length of the progress bar, and multiply this percentage by the total length of the song to calculate the givencurrentTimeThe value set.

Song time display

Song display: in the timer for calculating the progress of the song, the playing time and total time of the song are continuously sent, and the time on the left is the playing time of the song, that iscurrentTimeThe time on the right is subtracted from the total timecurrentTimeAnd convert them into the format we need.

Volume adjustment

volume: Set the volume value between 0.0 and 1.0, or query the current volume value;

Volume adjustment: This function is very simple to implement. PleasevolumeWhen the value of is set to 0.0, it will be muted. The principle of adjusting the volume on the control is the same as the progress bar of the song, judging the position of the click from the topmost position on the Y-axis of the first relative element, then further calculating the specific value, paying attention to the format of the value, not exceeding 1, and having only 1 digit after the decimal point.

Playlists and Playback Methods

Write the information of the whole song file injsonFile, get and generate a playlist. When playing a song, the system will generate the lead value of the currently playing song (for example:1,2, which means the third song of the second album, this is very important, and the song switching is based on this lead value). When the next song is to be played, the system will generate a new lead value according to the current playing method (list loop, single loop, random play, sequential play), and then inform the player how to play the next song, whether it is random, loop, or end of play.

Synchronously display lyrics

ajaxGet lyrics file (lrc file)

Regular filtering is used to filter out the lyrics and the corresponding time in front of the lyrics respectively, and the time is stored in an array

Traversing and storing the time and content of lyricsHTML

Every second to determine the current song playing time, if and temporary datadata-timelineIn the same value, scroll