{"id":24316,"date":"2024-11-21T12:37:33","date_gmt":"2024-11-21T04:37:33","guid":{"rendered":"https:\/\/fwq.ai\/blog\/24316\/"},"modified":"2024-11-21T12:37:33","modified_gmt":"2024-11-21T04:37:33","slug":"%e6%9e%84%e5%bb%ba%e5%87%ba%e8%89%b2%e7%9a%84%e9%9f%b3%e4%b9%90%e6%92%ad%e6%94%be%e5%99%a8%ef%bc%9awebman%e7%9a%84%e9%9f%b3%e9%a2%91%e5%ba%94%e7%94%a8%e6%8c%87%e5%8d%97","status":"publish","type":"post","link":"https:\/\/fwq.ai\/blog\/24316\/","title":{"rendered":"\u6784\u5efa\u51fa\u8272\u7684\u97f3\u4e50\u64ad\u653e\u5668\uff1aWebman\u7684\u97f3\u9891\u5e94\u7528\u6307\u5357"},"content":{"rendered":"

\"\u6784\u5efa\u51fa\u8272\u7684\u97f3\u4e50\u64ad\u653e\u5668\uff1aWebman\u7684\u97f3\u9891\u5e94\u7528\u6307\u5357\u63d2\u56fe\"<\/p>\n

\u6784\u5efa\u51fa\u8272\u7684\u97f3\u4e50\u64ad\u653e\u5668\uff1aWebman\u7684\u97f3\u9891\u5e94\u7528\u6307\u5357<\/p>\n

\u5728\u73b0\u4ee3\u79d1\u6280\u8fdb\u6b65\u7684\u65f6\u4ee3\uff0c\u97f3\u4e50\u6210\u4e3a\u4e86\u4eba\u4eec\u751f\u6d3b\u4e0d\u53ef\u6216\u7f3a\u7684\u4e00\u90e8\u5206\u3002\u968f\u7740\u4e92\u8054\u7f51\u7684\u53d1\u5c55\uff0c\u97f3\u4e50\u64ad\u653e\u5668\u4e5f\u53d6\u5f97\u4e86\u5de8\u5927\u7684\u8fdb\u6b65\uff0c\u4ece\u6700\u521d\u7684\u672c\u5730\u97f3\u4e50\u64ad\u653e\u5668\u5230\u73b0\u5728\u7684Web\u97f3\u9891\u5e94\u7528\u3002\u672c\u6587\u5c06\u4e3a\u4f60\u5c55\u793a\u5982\u4f55\u6784\u5efa\u4e00\u4e2a\u51fa\u8272\u7684Web\u97f3\u4e50\u64ad\u653e\u5668\u2014\u2014Webman\uff0c\u5e76\u63d0\u4f9b\u4ee3\u7801\u793a\u4f8b\u3002<\/p>\n

\u4e00\u3001\u8bbe\u5b9a\u57fa\u672c\u7684HTML\u5e03\u5c40\u548c\u6837\u5f0f<\/p>\n

\u9996\u5148\uff0c\u6211\u4eec\u9700\u8981\u5728HTML\u6587\u4ef6\u4e2d\u521b\u5efa\u4e00\u4e2a\u57fa\u672c\u7684\u5e03\u5c40\u7ed3\u6784\uff0c\u7136\u540e\u4f7f\u7528CSS\u6837\u5f0f\u4e3a\u5176\u6dfb\u52a0\u5916\u89c2\u548c\u6837\u5f0f\u3002\u4ee5\u4e0b\u662f\u4e00\u4e2a\u7b80\u5355\u7684\u793a\u4f8b\uff1a<\/p>\n

\n\n\n  <title>Webman\u97f3\u4e50\u64ad\u653e\u5668<\/title><link rel=\"stylesheet\" type=\"text\/css\" href=\"style.css\"><div id=\"player\">\n    <div id=\"track-info\">\n      <span id=\"track-title\"><\/span>\n      <span id=\"track-artist\"><\/span>\n    <\/div>\n    <div id=\"controls\">\n      <button id=\"play-btn\"><\/button>\n      <button id=\"prev-btn\"><\/button>\n      <button id=\"next-btn\"><\/button>\n    <\/div>\n    <div id=\"progress-bar\">\n      <div id=\"progress\"><\/div>\n    <\/div>\n  <\/div>\n  <script src=\"script.js\"><\/script><\/pre>\n
  \u767b\u5f55\u540e\u590d\u5236   <\/p>\n
\u63a5\u4e0b\u6765\uff0c\u6211\u4eec\u4f7f\u7528CSS\u6837\u5f0f\u6765\u4e3a\u64ad\u653e\u5668\u6dfb\u52a0\u5916\u89c2\u548c\u6837\u5f0f\u3002\u4ee5\u4e0b\u662f\u4e00\u4e2a\u7b80\u5355\u7684\u793a\u4f8b\uff1a<\/p>\n
#player {\n  width: 300px;\n  height: 100px;\n  background-color: #f2f2f2;\n  border: 1px solid #ccc;\n  padding: 10px;\n}\n\n#track-info {\n  margin-bottom: 10px;\n}\n\n#controls {\n  display: flex;\n  justify-content: center;\n  margin-bottom: 10px;\n}\n\n#play-btn, #prev-btn, #next-btn {\n  width: 50px;\n  height: 30px;\n  margin: 0 5px;\n  background-color: #ccc;\n}\n\n#progress-bar {\n  height: 10px;\n  background-color: #ccc;\n}<\/pre>\n
  \u767b\u5f55\u540e\u590d\u5236   <\/p>\n
\u4e8c\u3001\u5904\u7406\u97f3\u9891\u529f\u80fd<\/p>\n
\u5728JavaScript\u4e2d\uff0c\u6211\u4eec\u9700\u8981\u5904\u7406\u97f3\u9891\u76f8\u5173\u7684\u529f\u80fd\u3002\u9996\u5148\uff0c\u6211\u4eec\u9700\u8981\u4f7f\u7528  \u5143\u7d20\u6765\u5d4c\u5165\u97f3\u9891\u6587\u4ef6\uff0c\u7136\u540e\u4f7f\u7528JavaScript\u4ee3\u7801\u6765\u63a7\u5236\u5176\u64ad\u653e\u3001\u6682\u505c\u3001\u5207\u6362\u6b4c\u66f2\u7b49\u64cd\u4f5c\u3002\u4ee5\u4e0b\u662f\u4e00\u4e2a\u7b80\u5355\u7684\u793a\u4f8b\uff1a <\/p>\n
\/\/ \u83b7\u53d6HTML\u5143\u7d20\nconst audio = document.getElementsByTagName('audio')[0];\nconst playBtn = document.getElementById('play-btn');\nconst prevBtn = document.getElementById('prev-btn');\nconst nextBtn = document.getElementById('next-btn');\nconst trackTitle = document.getElementById('track-title');\nconst trackArtist = document.getElementById('track-artist');\nconst progress = document.getElementById('progress');\n\n\/\/ \u521b\u5efa\u6b4c\u66f2\u5217\u8868\nconst tracks = [\n  {\n    title: '\u6b4c\u66f21',\n    artist: '\u827a\u672f\u5bb61',\n    src: 'song1.mp3'\n  },\n  {\n    title: '\u6b4c\u66f22',\n    artist: '\u827a\u672f\u5bb62',\n    src: 'song2.mp3'\n  },\n  \/\/ \u6dfb\u52a0\u66f4\u591a\u7684\u6b4c\u66f2...\n];\n\nlet currentTrackIndex = 0; \/\/ \u5f53\u524d\u6b4c\u66f2\u7d22\u5f15\n\n\/\/ \u64ad\u653e\u6b4c\u66f2\nfunction playTrack() {\n  audio.src = tracks[currentTrackIndex].src;\n  audio.play();\n}\n\n\/\/ \u6682\u505c\u6b4c\u66f2\nfunction pauseTrack() {\n  audio.pause();\n}\n\n\/\/ \u5207\u6362\u5230\u4e0a\u4e00\u9996\u6b4c\u66f2\nfunction prevTrack() {\n  currentTrackIndex--;\n  if (currentTrackIndex = tracks.length) {\n    currentTrackIndex = 0;\n  }\n  playTrack();\n}\n\n\/\/ \u66f4\u65b0\u8fdb\u5ea6\u6761\nfunction updateProgress() {\n  const percentage = (audio.currentTime \/ audio.duration) * 100;\n  progress.style.width = `${percentage}%`;\n}\n\n\/\/ \u76d1\u542c\u64ad\u653e\u6309\u94ae\u70b9\u51fb\u4e8b\u4ef6\nplayBtn.addEventListener('click', () =&gt; {\n  if (audio.paused) {\n    playTrack();\n  } else {\n    pauseTrack();\n  }\n});\n\n\/\/ \u76d1\u542c\u4e0a\u4e00\u9996\u6309\u94ae\u70b9\u51fb\u4e8b\u4ef6\nprevBtn.addEventListener('click', prevTrack);\n\n\/\/ \u76d1\u542c\u4e0b\u4e00\u9996\u6309\u94ae\u70b9\u51fb\u4e8b\u4ef6\nnextBtn.addEventListener('click', nextTrack);\n\n\/\/ \u76d1\u542c\u97f3\u9891\u65f6\u95f4\u66f4\u65b0\u4e8b\u4ef6\naudio.addEventListener('timeupdate', updateProgress);\n\n\/\/ \u521d\u59cb\u5316\u64ad\u653e\u5668\nplayTrack();<\/pre>\n
  \u767b\u5f55\u540e\u590d\u5236   <\/p>\n
\u4ee5\u4e0a\u4ee3\u7801\u6f14\u793a\u4e86\u5982\u4f55\u4f7f\u7528JavaScript\u63a7\u5236\u97f3\u9891\u7684\u64ad\u653e\u3001\u6682\u505c\u548c\u6b4c\u66f2\u5207\u6362\u7b49\u529f\u80fd\uff0c\u540c\u65f6\u8fd8\u5b9e\u73b0\u4e86\u8fdb\u5ea6\u6761\u7684\u66f4\u65b0\u3002<\/p>\n
\u901a\u8fc7\u4ee5\u4e0a\u6b65\u9aa4\uff0c\u6211\u4eec\u5df2\u7ecf\u6210\u529f\u6784\u5efa\u4e86\u4e00\u4e2a\u51fa\u8272\u7684Web\u97f3\u4e50\u64ad\u653e\u5668\u2014\u2014Webman\u3002\u5f53\u7136\uff0c\u8fd9\u53ea\u662f\u4e00\u4e2a\u7b80\u5355\u7684\u793a\u4f8b\uff0c\u4f60\u53ef\u4ee5\u6839\u636e\u81ea\u5df1\u7684\u9700\u6c42\u8fdb\u884c\u529f\u80fd\u6269\u5c55\u548c\u754c\u9762\u4f18\u5316\u3002<\/p>\n
\u603b\u7ed3\uff1a<\/p>\n
\u672c\u6587\u4e3a\u4f60\u63d0\u4f9b\u4e86\u6784\u5efaWeb\u97f3\u4e50\u64ad\u653e\u5668\u7684\u6307\u5357\uff0c\u5e76\u63d0\u4f9b\u4e86\u76f8\u5e94\u7684\u4ee3\u7801\u793a\u4f8b\u3002\u5e0c\u671b\u8fd9\u7bc7\u6587\u7ae0\u80fd\u591f\u5e2e\u52a9\u4f60\u4e86\u89e3\u5982\u4f55\u6784\u5efa\u51fa\u8272\u7684\u97f3\u9891\u5e94\u7528\uff0c\u540c\u65f6\u4e5f\u9f13\u52b1\u4f60\u5728\u5b9e\u8df5\u4e2d\u63a2\u7d22\u66f4\u591a\u7684\u529f\u80fd\u548c\u521b\u65b0\u3002\u795d\u4f60\u6784\u5efa\u51fa\u4e00\u6b3e\u72ec\u7279\u4e14\u4ee4\u4eba\u6ee1\u610f\u7684\u97f3\u4e50\u64ad\u653e\u5668\uff01<\/p>\n
\u4ee5\u4e0a\u5c31\u662f\u6784\u5efa\u51fa\u8272\u7684\u97f3\u4e50\u64ad\u653e\u5668\uff1aWebman\u7684\u97f3\u9891\u5e94\u7528\u6307\u5357\u7684\u8be6\u7ec6\u5185\u5bb9\uff0c\u66f4\u591a\u8bf7\u5173\u6ce8\u7c73\u4e91\u5176\u5b83\u76f8\u5173\u6587\u7ae0\uff01<\/p>\n","protected":false},"excerpt":{"rendered":"
\u6784\u5efa\u51fa\u8272\u7684\u97f3\u4e50\u64ad\u653e\u5668\uff1aWebman\u7684\u97f3\u9891\u5e94\u7528\u6307\u5357 \u5728\u73b0\u4ee3\u79d1\u6280\u8fdb\u6b65\u7684\u65f6\u4ee3\uff0c\u97f3\u4e50\u6210\u4e3a\u4e86\u4eba\u4eec\u751f\u6d3b\u4e0d\u53ef\u6216\u7f3a\u7684\u4e00\u90e8\u5206\u3002\u968f\u7740\u4e92\u8054\u7f51\u7684\u53d1\u5c55\uff0c\u97f3\u4e50\u64ad\u653e\u5668\u4e5f\u53d6\u5f97\u4e86\u5de8\u5927\u7684\u8fdb\u6b65\uff0c\u4ece\u6700\u521d\u7684\u672c\u5730\u97f3\u4e50\u64ad\u653e\u5668\u5230\u73b0\u5728\u7684Web\u97f3\u9891\u5e94\u7528\u3002\u672c\u6587\u5c06\u4e3a\u4f60\u5c55\u793a\u5982\u4f55\u6784\u5efa\u4e00\u4e2a\u51fa\u8272\u7684Web\u97f3\u4e50\u64ad\u653e\u5668\u2014\u2014Webman\uff0c\u5e76\u63d0\u4f9b\u4ee3\u7801\u793a\u4f8b\u3002 \u4e00\u3001\u8bbe\u5b9a\u57fa\u672c\u7684HTML\u5e03\u5c40\u548c\u6837\u5f0f \u9996\u5148\uff0c\u6211\u4eec\u9700\u8981\u5728HTML\u6587\u4ef6\u4e2d\u521b\u5efa\u4e00\u4e2a\u57fa\u672c\u7684\u5e03\u5c40\u7ed3\u6784\uff0c\u7136\u540e\u4f7f\u7528CSS\u6837\u5f0f\u4e3a\u5176\u6dfb\u52a0\u5916\u89c2\u548c\u6837\u5f0f\u3002\u4ee5\u4e0b\u662f\u4e00\u4e2a\u7b80\u5355\u7684\u793a\u4f8b\uff1a <title>Webman\u97f3\u4e50\u64ad\u653e\u5668<\/title><link rel=”stylesheet” type=”text\/css” href=”style.css”><div id=”player”> <div id=”track-info”> <span id=”track-title”><\/span> <span id=”track-artist”><\/span> <\/div> <div id=”controls”> <button id=”play-btn”><\/button> <button id=”prev-btn”><\/button> <button id=”next-btn”><\/button> <\/div> <div id=”progress-bar”> <div id=”progress”><\/div> <\/div> <\/div> <script src=”script.js”><\/script> \u767b\u5f55\u540e\u590d\u5236 \u63a5\u4e0b\u6765\uff0c\u6211\u4eec\u4f7f\u7528CSS\u6837\u5f0f\u6765\u4e3a\u64ad\u653e\u5668\u6dfb\u52a0\u5916\u89c2\u548c\u6837\u5f0f\u3002\u4ee5\u4e0b\u662f\u4e00\u4e2a\u7b80\u5355\u7684\u793a\u4f8b\uff1a #player { width: 300px; height: 100px; background-color: #f2f2f2; border: 1px solid #ccc; padding: 10px; } #track-info { margin-bottom: 10px; } […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[16],"tags":[],"class_list":["post-24316","post","type-post","status-publish","format-standard","hentry","category-16"],"_links":{"self":[{"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/posts\/24316","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/comments?post=24316"}],"version-history":[{"count":0,"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/posts\/24316\/revisions"}],"wp:attachment":[{"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/media?parent=24316"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/categories?post=24316"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/tags?post=24316"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}