react模仿window media player 播放音乐视觉效果
代码语言:html
所属分类:多媒体
代码描述:react模仿window media player 播放音乐视觉效果
代码标签: media player 播放 音乐 视觉 效果
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> html, body { height: 100%; } body { margin: 0; } #main, #app, #visualizer { height: 100%; } #app { display: flex; justify-content: center; align-items: center; } #app img { cursor: pointer; height: 80px; } #visualizer { display: flex; flex-direction: column; width: 100%; padding: 4px; box-sizing: border-box; background: radial-gradient(white 30%, blue); } #visualizer #controls { flex: 1; display: flex; justify-content: center; align-items: center; background: linear-gradient(dimgray, ghostwhite); } #visualizer #bars { flex: 4; display: flex; justify-content: center; align-items: flex-end; background: black; padding-top: 4vh; padding-bottom: 4vh; } #visualizer #bars .bar { width: 4px; margin-right: 1px; background: chartreuse; } </style> </head> <body translate="no"> <div id="main"></div> <script type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/react.dev.js"></script> <script type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/react-dom.dev.js"></script> <script> // Shoutout to Sarah Drasner for heavily commenting her visualizer setup! // https://codepen.io/sdras/pen/PVjPKa const AMPLITUDE_MAX = 255; function App() { const [userClicked, setUserClicked] = React.useState(false); // Chrome requires a user click/gesture before AudioContext can be created // https://goo.gl/7K7WLu return ( React.createElement("div", { id: "app" }, !userClicked ? React.createElement("img", { onClick: () => setUserClicked(true), src: "http://repo.bfw.wiki/bfwrepo/icon/5e7a050749c06.png", alt: "点击播放" }) : // TODO Find a version without dog barking React.createElement(Visualizer, { frequencyCount: 128, audioSource: 'http://repo.bfw.wiki/bfwrepo/sound/5e1528f1dca14.mp3' }))); } class Visualizer extends React.Component { constructor(props) { super(props); this.state = { frequencyAmplitudes: Array.from(props.frequencyCount).........完整代码请登录后点击上方下载按钮下载查看
网友评论0