{"id":719,"date":"2026-09-23T12:28:22","date_gmt":"2026-09-23T04:28:22","guid":{"rendered":"https:\/\/jccssyl.cc\/?page_id=719"},"modified":"2026-09-23T12:46:13","modified_gmt":"2026-09-23T04:46:13","slug":"%e6%a0%a1%e6%ad%8c","status":"publish","type":"page","link":"https:\/\/jccssyl.cc\/?page_id=719","title":{"rendered":"\u6821\u6b4c"},"content":{"rendered":"\n<meta charset=\"UTF-8\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <title>\u6821\u6b4c<\/title>\n\n  <style>\n    * {\n      box-sizing: border-box;\n    }\n\n    .music-player {\n      width: 100%;\n      max-width: 800px;\n      padding: 16px;\n      border-radius: 16px;\n      background: #ffffff;\n      box-shadow: 0 4px 18px rgba(0, 0, 0, 0.12);\n      font-family: Arial, \"Microsoft JhengHei\", sans-serif;\n    }\n\n    .player-row {\n      display: flex;\n      align-items: center;\n      gap: 12px;\n    }\n\n    \/* \u64ad\u653e\uff0f\u66ab\u505c\u6309\u9215 *\/\n    #playButton {\n      flex: 0 0 auto;\n      width: 52px;\n      height: 52px;\n      border: 0;\n      border-radius: 50%;\n      background: #16a34a;\n      color: white;\n      font-size: 20px;\n      cursor: pointer;\n      transition: transform 0.15s, background 0.15s;\n    }\n\n    #playButton:hover {\n      background: #15803d;\n      transform: scale(1.06);\n    }\n\n    \/* \u6642\u9593\u986f\u793a *\/\n    .time {\n      min-width: 42px;\n      color: #374151;\n      font-size: 14px;\n      font-variant-numeric: tabular-nums;\n      text-align: center;\n    }\n\n    \/* \u9032\u5ea6\u689d *\/\n    #progressBar {\n      --progress: 0%;\n      flex: 1;\n      height: 10px;\n      margin: 0;\n      appearance: none;\n      -webkit-appearance: none;\n      border-radius: 999px;\n      cursor: pointer;\n      outline: none;\n\n      \/* \u7da0\u8272 = \u5df2\u64ad\u653e\uff1b\u6dfa\u7070\u8272 = \u672a\u64ad\u653e *\/\n      background: linear-gradient(\n        to right,\n        #22c55e 0%,\n        #22c55e var(--progress),\n        #e5e7eb var(--progress),\n        #e5e7eb 100%\n      );\n    }\n\n    \/* Chrome\u3001Edge\u3001Safari \u7684\u62d6\u66f3\u5713\u9ede *\/\n    #progressBar::-webkit-slider-thumb {\n      width: 20px;\n      height: 20px;\n      appearance: none;\n      -webkit-appearance: none;\n      border: 3px solid white;\n      border-radius: 50%;\n      background: #16a34a;\n      box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25);\n    }\n\n    \/* Firefox \u7684\u62d6\u66f3\u5713\u9ede *\/\n    #progressBar::-moz-range-thumb {\n      width: 16px;\n      height: 16px;\n      border: 3px solid white;\n      border-radius: 50%;\n      background: #16a34a;\n      box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25);\n    }\n  <\/style>\n\n\n\n\n  <div class=\"music-player\">\n    <audio id=\"audioPlayer\" preload=\"metadata\">\n      <source src=\"\/upload\/song\/school_song.mp3\" type=\"audio\/mpeg\">\n      \u4f60\u7684\u700f\u89bd\u5668\u4e0d\u652f\u63f4\u97f3\u8a0a\u64ad\u653e\u3002\n    <\/audio>\n\n    <div class=\"player-row\">\n      <button id=\"playButton\" type=\"button\" aria-label=\"\u64ad\u653e\">\u25b6<\/button>\n\n      <span class=\"time\" id=\"currentTime\">0:00<\/span>\n\n      <input id=\"progressBar\" type=\"range\" min=\"0\" max=\"100\" value=\"0\" aria-label=\"\u64ad\u653e\u9032\u5ea6\">\n\n      <span class=\"time\" id=\"duration\">0:00<\/span>\n    <\/div>\n  <\/div>\n\n  <script>\n    const audio = document.getElementById(\"audioPlayer\");\n    const playButton = document.getElementById(\"playButton\");\n    const progressBar = document.getElementById(\"progressBar\");\n    const currentTime = document.getElementById(\"currentTime\");\n    const duration = document.getElementById(\"duration\");\n\n    function formatTime(seconds) {\n      if (!isFinite(seconds)) return \"0:00\";\n\n      const minutes = Math.floor(seconds \/ 60);\n      const remainingSeconds = Math.floor(seconds % 60);\n\n      return `${minutes}:${String(remainingSeconds).padStart(2, \"0\")}`;\n    }\n\n    function updateProgressStyle(percent) {\n      progressBar.style.setProperty(\"--progress\", `${percent}%`);\n    }\n\n    \/\/ \u6309\u4e0b\u64ad\u653e\uff0f\u66ab\u505c\n    playButton.addEventListener(\"click\", () => {\n      if (audio.paused) {\n        audio.play();\n      } else {\n        audio.pause();\n      }\n    });\n\n    \/\/ \u64ad\u653e\u958b\u59cb\u6642\u66f4\u65b0\u6309\u9215\n    audio.addEventListener(\"play\", () => {\n      playButton.textContent = \"\u275a\u275a\";\n      playButton.setAttribute(\"aria-label\", \"\u66ab\u505c\");\n    });\n\n    \/\/ \u66ab\u505c\u6642\u66f4\u65b0\u6309\u9215\n    audio.addEventListener(\"pause\", () => {\n      playButton.textContent = \"\u25b6\";\n      playButton.setAttribute(\"aria-label\", \"\u64ad\u653e\");\n    });\n\n    \/\/ \u8b80\u53d6 MP3 \u9577\u5ea6\n    audio.addEventListener(\"loadedmetadata\", () => {\n      duration.textContent = formatTime(audio.duration);\n    });\n\n    \/\/ \u64ad\u653e\u671f\u9593\u66f4\u65b0\u660e\u986f\u7684\u7da0\u8272\u9032\u5ea6\u689d\n    audio.addEventListener(\"timeupdate\", () => {\n      if (!audio.duration) return;\n\n      const percent = (audio.currentTime \/ audio.duration) * 100;\n\n      progressBar.value = percent;\n      currentTime.textContent = formatTime(audio.currentTime);\n      progressBar.setAttribute(\"aria-valuenow\", Math.round(percent));\n      updateProgressStyle(percent);\n    });\n\n    \/\/ \u62d6\u66f3\u9032\u5ea6\u689d\u4ee5\u8df3\u81f3\u6307\u5b9a\u4f4d\u7f6e\n    progressBar.addEventListener(\"input\", () => {\n      if (!audio.duration) return;\n\n      const percent = Number(progressBar.value);\n      audio.currentTime = (percent \/ 100) * audio.duration;\n      updateProgressStyle(percent);\n    });\n\n    \/\/ \u64ad\u653e\u5b8c\u7562\u5f8c\u56de\u5230\u8d77\u9ede\n    audio.addEventListener(\"ended\", () => {\n      progressBar.value = 0;\n      updateProgressStyle(0);\n      currentTime.textContent = \"0:00\";\n    });\n  <\/script>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1049\" height=\"1359\" src=\"https:\/\/jccssyl.cc\/wp-content\/uploads\/school_song.png\" alt=\"\" class=\"wp-image-720\" srcset=\"https:\/\/jccssyl.cc\/wp-content\/uploads\/school_song.png 1049w, https:\/\/jccssyl.cc\/wp-content\/uploads\/school_song-767x994.png 767w\" sizes=\"auto, (max-width: 1049px) 100vw, 1049px\" \/><\/figure>\n","protected":false},"excerpt":{"rendered":"<p>\u6821\u6b4c \u4f60\u7684\u700f\u89bd\u5668\u4e0d\u652f\u63f4\u97f3\u8a0a\u64ad\u653e\u3002 \u25b6 0:00 0:00<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"ocean_front_end_style_editor":"no","ocean_post_layout":"","ocean_both_sidebars_style":"","ocean_both_sidebars_content_width":0,"ocean_both_sidebars_sidebars_width":0,"ocean_sidebar":"","ocean_second_sidebar":"","ocean_disable_margins":"enable","ocean_add_body_class":"","ocean_shortcode_before_top_bar":"","ocean_shortcode_after_top_bar":"","ocean_shortcode_before_header":"","ocean_shortcode_after_header":"","ocean_has_shortcode":"","ocean_shortcode_after_title":"","ocean_shortcode_before_footer_widgets":"","ocean_shortcode_after_footer_widgets":"","ocean_shortcode_before_footer_bottom":"","ocean_shortcode_after_footer_bottom":"","ocean_display_top_bar":"default","ocean_display_header":"default","ocean_header_style":"","ocean_center_header_left_menu":"","ocean_custom_header_template":"","ocean_custom_logo":0,"ocean_custom_retina_logo":0,"ocean_custom_logo_max_width":0,"ocean_custom_logo_tablet_max_width":0,"ocean_custom_logo_mobile_max_width":0,"ocean_custom_logo_max_height":0,"ocean_custom_logo_tablet_max_height":0,"ocean_custom_logo_mobile_max_height":0,"ocean_header_custom_menu":"","ocean_menu_typo_font_family":"","ocean_menu_typo_font_subset":"","ocean_menu_typo_font_size":0,"ocean_menu_typo_font_size_tablet":0,"ocean_menu_typo_font_size_mobile":0,"ocean_menu_typo_font_size_unit":"px","ocean_menu_typo_font_weight":"","ocean_menu_typo_font_weight_tablet":"","ocean_menu_typo_font_weight_mobile":"","ocean_menu_typo_transform":"","ocean_menu_typo_transform_tablet":"","ocean_menu_typo_transform_mobile":"","ocean_menu_typo_line_height":0,"ocean_menu_typo_line_height_tablet":0,"ocean_menu_typo_line_height_mobile":0,"ocean_menu_typo_line_height_unit":"","ocean_menu_typo_spacing":0,"ocean_menu_typo_spacing_tablet":0,"ocean_menu_typo_spacing_mobile":0,"ocean_menu_typo_spacing_unit":"","ocean_menu_link_color":"","ocean_menu_link_color_hover":"","ocean_menu_link_color_active":"","ocean_menu_link_background":"","ocean_menu_link_hover_background":"","ocean_menu_link_active_background":"","ocean_menu_social_links_bg":"","ocean_menu_social_hover_links_bg":"","ocean_menu_social_links_color":"","ocean_menu_social_hover_links_color":"","ocean_disable_title":"default","ocean_disable_heading":"default","ocean_post_title":"","ocean_post_subheading":"","ocean_post_title_style":"","ocean_post_title_background_color":"","ocean_post_title_background":0,"ocean_post_title_bg_image_position":"","ocean_post_title_bg_image_attachment":"","ocean_post_title_bg_image_repeat":"","ocean_post_title_bg_image_size":"","ocean_post_title_height":0,"ocean_post_title_bg_overlay":0.5,"ocean_post_title_bg_overlay_color":"","ocean_disable_breadcrumbs":"default","ocean_breadcrumbs_color":"","ocean_breadcrumbs_separator_color":"","ocean_breadcrumbs_links_color":"","ocean_breadcrumbs_links_hover_color":"","ocean_display_footer_widgets":"default","ocean_display_footer_bottom":"default","ocean_custom_footer_template":"","footnotes":""},"class_list":["post-719","page","type-page","status-publish","hentry","entry"],"_links":{"self":[{"href":"https:\/\/jccssyl.cc\/index.php?rest_route=\/wp\/v2\/pages\/719","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/jccssyl.cc\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/jccssyl.cc\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/jccssyl.cc\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/jccssyl.cc\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=719"}],"version-history":[{"count":5,"href":"https:\/\/jccssyl.cc\/index.php?rest_route=\/wp\/v2\/pages\/719\/revisions"}],"predecessor-version":[{"id":727,"href":"https:\/\/jccssyl.cc\/index.php?rest_route=\/wp\/v2\/pages\/719\/revisions\/727"}],"wp:attachment":[{"href":"https:\/\/jccssyl.cc\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=719"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}