Vinyl record style audio player jQuery plugin-H5 Tutorial-php.cn

Brief Tutorial

colorizer is a jQuery plug-in that can create a vinyl record-style audio player. This plug-in uses jQuery to drive audio playback and uses CSS3 to create animation effects for the record player.

Usage method

Introduce jquery and colorizer.js files into the page.

Copy after login

HTML structure

Use the following HTML structure to build a record player.

Copy after login

CSS Styles

Use the following CSS styles for the record player.

body,ul,li{ margin: 0; padding: 0; } body{ background: #333; } div.audio{ position: relative; top: 100px; left: 100px; background: #eee; width: 400px; height: 400px; transition: all 0.3s; box-shadow: 33px 24px 10px 0 rgba(0, 0, 0, 0.2); } div.colorizer{ position: absolute; left: 0; top: 0; width: 400px; height: 400px; transition: all 0.3s; z-index:3; } div.echolizer{ background: #fff; position: absolute; left: 0; bottom: 0; z-index:10; width: 0; height: 4px; transition: all 0.3s; } div.audio img{ width: 400px; } div.disk{ background-image: url("../img/cd.png"); width: 350px; height: 350px; position: absolute; right: -140px; background-size: cover; z-index:-1; top: 34px; -webkit-animation: rotating 2s linear infinite; -moz-animation: rotating 2s linear infinite; -ms-animation: rotating 2s linear infinite; -o-animation: rotating 2s linear infinite; animation: rotating 2s linear infinite; border-radius: 50%; } @-webkit-keyframes rotating /* Safari and Chrome */ { from { -ms-transform: rotate(0deg); -moz-transform: rotate(0deg); -webkit-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); } to { -ms-transform: rotate(360deg); -moz-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes rotating { from { -ms-transform: rotate(0deg); -moz-transform: rotate(0deg); -webkit-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); } to { -ms-transform: rotate(360deg); -moz-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(360deg); } }

Copy after login

Initialization plug-in

After the page DOM element is loaded, use the following method to initialize the audio playback plug-in.

$.colorizer("div.colorizer", { file: "Shahre_Man.mp3", shadow: ".colorizer", echolizer: ".echolizer" });

Copy after login

The above is the content of the vinyl record style audio player jQuery plug-in. For more related content, please pay attention to the PHP Chinese website (m.sbmmt.com)!