{"id":23,"date":"2026-05-22T10:01:50","date_gmt":"2026-05-22T10:01:50","guid":{"rendered":"https:\/\/northbound-auto.com\/?page_id=23"},"modified":"2026-06-01T12:42:05","modified_gmt":"2026-06-01T12:42:05","slug":"audio","status":"publish","type":"page","link":"https:\/\/northbound-auto.com\/?page_id=23","title":{"rendered":"AUDIO"},"content":{"rendered":"\n<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n    <meta charset=\"utf-8\"\/>\n    <meta content=\"width=device-width, initial-scale=1.0\" name=\"viewport\"\/>\n    <title>Audio &#8211; Archive<\/title>\n    <script src=\"https:\/\/cdn.tailwindcss.com?plugins=forms,container-queries\"><\/script>\n    <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap\" rel=\"stylesheet\"\/>\n    <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Hanken+Grotesk:wght@400;500;600&amp;family=Libre+Caslon+Text:wght@400;700&amp;display=swap\" rel=\"stylesheet\"\/>\n    <script id=\"tailwind-config\">\n        tailwind.config = {\n            darkMode: \"class\",\n            theme: {\n                extend: {\n                    \"colors\": {\n                        \"outline\": \"#7e7576\", \"surface-tint\": \"#5e5e5e\", \"primary\": \"#000000\",\n                        \"on-secondary-fixed-variant\": \"#454747\", \"secondary\": \"#5d5f5f\",\n                        \"on-primary-fixed\": \"#1b1b1b\", \"tertiary\": \"#000000\", \"inverse-primary\": \"#c6c6c6\",\n                        \"primary-fixed\": \"#e2e2e2\", \"on-primary-fixed-variant\": \"#474747\",\n                        \"on-tertiary-container\": \"#848484\", \"on-background\": \"#1a1c1c\",\n                        \"secondary-fixed\": \"#e2e2e2\", \"on-tertiary\": \"#ffffff\", \"on-primary-container\": \"#848484\",\n                        \"primary-fixed-dim\": \"#c6c6c6\", \"surface-container-highest\": \"#e2e2e2\",\n                        \"on-surface-variant\": \"#4c4546\", \"tertiary-container\": \"#1b1c1c\",\n                        \"surface-variant\": \"#e2e2e2\", \"secondary-fixed-dim\": \"#c6c6c7\",\n                        \"on-secondary\": \"#ffffff\", \"error\": \"#ba1a1a\", \"on-secondary-fixed\": \"#1a1c1c\",\n                        \"surface-container\": \"#eeeeee\", \"surface\": \"#f9f9f9\", \"surface-container-high\": \"#e8e8e8\",\n                        \"surface-bright\": \"#f9f9f9\", \"on-error\": \"#ffffff\", \"on-tertiary-fixed\": \"#1b1c1c\",\n                        \"outline-variant\": \"#cfc4c5\", \"error-container\": \"#ffdad6\", \"on-primary\": \"#ffffff\",\n                        \"surface-container-lowest\": \"#ffffff\", \"surface-container-low\": \"#f3f3f3\",\n                        \"on-error-container\": \"#93000a\", \"tertiary-fixed\": \"#e3e2e2\", \"secondary-container\": \"#dfe0e0\",\n                        \"on-surface\": \"#1a1c1c\", \"inverse-surface\": \"#2f3131\", \"primary-container\": \"#1b1b1b\",\n                        \"tertiary-fixed-dim\": \"#c7c6c6\", \"background\": \"#f9f9f9\", \"on-secondary-container\": \"#616363\",\n                        \"inverse-on-surface\": \"#f1f1f1\", \"on-tertiary-fixed-variant\": \"#464747\", \"surface-dim\": \"#dadada\"\n                    },\n                    \"borderRadius\": { \"DEFAULT\": \"0.25rem\", \"lg\": \"0.5rem\", \"xl\": \"0.75rem\", \"full\": \"9999px\" },\n                    \"spacing\": { \"grid-margin\": \"64px\", \"element-gap\": \"48px\", \"max-width\": \"1440px\", \"grid-gutter\": \"24px\", \"section-gap\": \"160px\" },\n                    \"fontFamily\": {\n                        \"headline-lg-mobile\": [\"Hanken Grotesk\"], \"nav-link\": [\"Hanken Grotesk\"],\n                        \"body-md\": [\"Hanken Grotesk\"], \"display-lg\": [\"Hanken Grotesk\"],\n                        \"headline-md\": [\"Hanken Grotesk\"], \"headline-lg\": [\"Hanken Grotesk\"],\n                        \"label-caps\": [\"Hanken Grotesk\"], \"body-lg\": [\"Hanken Grotesk\"]\n                    },\n                    \"fontSize\": {\n                        \"headline-lg-mobile\": [\"32px\", { \"lineHeight\": \"40px\", \"fontWeight\": \"400\" }],\n                        \"nav-link\": [\"14px\", { \"lineHeight\": \"20px\", \"letterSpacing\": \"0.1em\", \"fontWeight\": \"500\" }],\n                        \"body-md\": [\"16px\", { \"lineHeight\": \"28px\", \"fontWeight\": \"400\" }],\n                        \"display-lg\": [\"72px\", { \"lineHeight\": \"80px\", \"letterSpacing\": \"-0.02em\", \"fontWeight\": \"400\" }],\n                        \"headline-md\": [\"32px\", { \"lineHeight\": \"40px\", \"fontWeight\": \"400\" }],\n                        \"headline-lg\": [\"48px\", { \"lineHeight\": \"56px\", \"fontWeight\": \"400\" }],\n                        \"label-caps\": [\"12px\", { \"lineHeight\": \"16px\", \"letterSpacing\": \"0.15em\", \"fontWeight\": \"600\" }],\n                        \"body-lg\": [\"18px\", { \"lineHeight\": \"32px\", \"fontWeight\": \"400\" }]\n                    }\n                }\n            }\n        }\n    <\/script>\n    <style>\n        body { background-color: #f9f9f9; color: #000000; font-family: 'Hanken Grotesk', sans-serif; }\n        .hide-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }\n        .hide-scrollbar::-webkit-scrollbar { display: none; }\n        #description-content { max-height: 0; opacity: 0; overflow: hidden; transition: max-height 0.5s ease-out, opacity 0.3s ease-in; }\n        #description-content.expanded { max-height: 200px; opacity: 1; }\n        \n        \/* \u4ec5\u5728\u767b\u5f55\u7ba1\u7406\u5458\u72b6\u6001\u4e0b\u751f\u6548\u7684\u7f16\u8f91\u72b6\u6001\u63d0\u793a *\/\n        body.logged-in [contenteditable=\"true\"] {\n            outline: none;\n            padding: 2px 4px;\n            transition: all 0.2s ease;\n        }\n        body.logged-in [contenteditable=\"true\"]:hover {\n            background-color: rgba(0, 0, 0, 0.03);\n            border-radius: 2px;\n            cursor: text;\n        }\n        body.logged-in [contenteditable=\"true\"]:focus {\n            background-color: rgba(0, 0, 0, 0.05);\n            box-shadow: 0 0 0 1px #000000;\n            border-radius: 2px;\n        }\n    <\/style>\n<\/head>\n<body class=\"bg-background text-primary antialiased flex flex-col\">\n\n    <main class=\"w-full max-w-max-width mx-auto pb-24\">\n        \n        <!-- Hero Image (\u6700\u4e0a\u65b9\u6a2a\u5e45 - 3.webp\uff0c grayscale \u6ee4\u955c\u5448\u73b0\u65e0\u635f\u9ed1\u767d\u6548\u679c) -->\n        <section class=\"w-full mt-12 mb-section-gap px-grid-margin md:px-0\">\n            <div class=\"w-full h-[200px] md:h-[320px] bg-surface-container border border-outline-variant overflow-hidden rounded shadow-sm\">\n                <img decoding=\"async\" src=\"https:\/\/northbound-auto.com\/wp-content\/uploads\/2026\/05\/4.jpeg\" class=\"w-full h-full object-cover grayscale\" alt=\"Hero Music Banner\" title=\"AUDIO\">\n            <\/div>\n        <\/section>\n\n        <!-- Sound Intro Section -> Album Set -->\n        <section class=\"px-grid-margin mb-section-gap\">\n            <div class=\"text-center mb-16\">\n                <h2 contenteditable=\"true\" class=\"text-3xl font-semibold tracking-wide text-primary uppercase inline-block border-b-2 border-primary pb-4\">Sound Intro<\/h2>\n            <\/div>\n            <div class=\"bg-surface-container-low p-8 md:p-16 flex flex-col md:row md:flex-row gap-12 max-w-5xl mx-auto items-center\">\n                <div class=\"flex-1 w-full relative\">\n                    <!-- \u8f6e\u64ad\u56fe\u5bb9\u5668\u7ec4\u4ef6 (\u5305\u542b\u5de6\u53f3\u63a7\u5236\u952e\u4e0e\u4e0b\u65b9\u6307\u793a\u5668\u70b9) -->\n                    <div id=\"featured-image-placeholder\" class=\"w-full aspect-[4\/3] bg-surface-container-high border border-outline-variant overflow-hidden rounded shadow-sm relative group\">\n                        \n                        <!-- \u5e7b\u706f\u7247 1\uff1a\u5409\u4ed6 -->\n                        <img decoding=\"async\" id=\"carousel-img-0\" src=\"https:\/\/northbound-auto.com\/wp-content\/uploads\/2026\/06\/jameslee-guitar-670087-scaled.jpg\" class=\"absolute inset-0 w-full h-full object-cover transition-opacity duration-700 opacity-100\" alt=\"Sound Intro - Guitar\" title=\"AUDIO\">\n                        \n                        <!-- \u5e7b\u706f\u7247 2\uff1a\u9ea6\u514b\u98ce -->\n                        <img decoding=\"async\" id=\"carousel-img-1\" src=\"https:\/\/northbound-auto.com\/wp-content\/uploads\/2026\/06\/mic.jpeg\" class=\"absolute inset-0 w-full h-full object-cover transition-opacity duration-700 opacity-0\" alt=\"Sound Intro - Mic\" title=\"AUDIO\">\n                        \n                        <!-- \u5de6\u53f3\u5207\u6362\u6309\u952e (\u9f20\u6807\u60ac\u6d6e\u5c55\u73b0) -->\n                        <button id=\"carousel-prev\" class=\"absolute left-4 top-1\/2 -translate-y-1\/2 bg-black\/40 hover:bg-black\/60 text-white w-10 h-10 rounded-full flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-300 z-10\" aria-label=\"Previous Slide\">\n                            <span class=\"material-symbols-outlined\">chevron_left<\/span>\n                        <\/button>\n                        <button id=\"carousel-next\" class=\"absolute right-4 top-1\/2 -translate-y-1\/2 bg-black\/40 hover:bg-black\/60 text-white w-10 h-10 rounded-full flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-300 z-10\" aria-label=\"Next Slide\">\n                            <span class=\"material-symbols-outlined\">chevron_right<\/span>\n                        <\/button>\n                        \n                        <!-- \u4e0b\u65b9\u6307\u793a\u5668\u6307\u793a\u5706\u70b9 -->\n                        <div class=\"absolute bottom-4 left-1\/2 -translate-x-1\/2 flex gap-2.5 z-10\">\n                            <button id=\"indicator-0\" class=\"w-2.5 h-2.5 rounded-full bg-white transition-colors duration-300\" aria-label=\"Slide 1\"><\/button>\n                            <button id=\"indicator-1\" class=\"w-2.5 h-2.5 rounded-full bg-white\/50 transition-colors duration-300\" aria-label=\"Slide 2\"><\/button>\n                        <\/div>\n                    <\/div>\n                <\/div>\n                <div class=\"md:w-1\/3 flex flex-col md:mt-0 items-center\">\n                    <h3 contenteditable=\"true\" class=\"font-body-md text-body-md text-secondary mb-2 italic text-center\" id=\"profile-title\">\u300aVoice Cover\u300b<\/h3>\n                    <div class=\"mb-6 expanded\" id=\"description-content\">\n                        <p contenteditable=\"true\" class=\"font-body-md text-secondary text-sm leading-relaxed text-center\" id=\"profile-description\">I am skilled in dubbing anime, radio dramas, audiobooks, and more. In my spare time, I also play guitar and sing.<\/p>\n                    <\/div>\n                    <button contenteditable=\"true\" class=\"bg-primary text-on-primary font-label-caps text-label-caps px-8 py-3 hover:bg-surface hover:text-primary border border-primary transition-colors\" id=\"detail-btn\" onclick=\"toggleDetail()\">CLOSE<\/button>\n                <\/div>\n            <\/div>\n        <\/section>\n\n        <!-- Interstitial Image (\u4e2d\u90e8\u6a2a\u5e45 - 2.jpg\uff0c grayscale \u6ee4\u955c\u5448\u73b0\u65e0\u635f\u9ed1\u767d\u6548\u679c) -->\n        <section class=\"w-full mb-section-gap\">\n            <div class=\"w-full h-[250px] md:h-[350px] bg-surface-container border border-outline-variant overflow-hidden shadow-sm\">\n                <img decoding=\"async\" src=\"https:\/\/northbound-auto.com\/wp-content\/uploads\/2026\/05\/2.jpg\" class=\"w-full h-full object-cover grayscale\" alt=\"Guitar Close Up Banner\" title=\"AUDIO\">\n            <\/div>\n        <\/section>\n\n        <!-- Voice Dubbing Section (\u914d\u97f3\u5c55\u793a\u677f\u5757 - \u91c7\u7528\u539f\u751f\u89c6\u9891\u5e27\u81ea\u9002\u5e94\u5c01\u9762\uff0cItem 1 \u5feb\u8fdb 2 \u79d2 \/ Item 5 \u5feb\u8fdb 1 \u79d2\u9632\u9ed1\u5c4f) -->\n        <section class=\"px-grid-margin mb-section-gap\">\n            <div class=\"text-center mb-16\">\n                <h2 contenteditable=\"true\" class=\"text-3xl font-semibold tracking-wide text-primary uppercase inline-block border-b-2 border-primary pb-4\">Voice dubbing<\/h2>\n            <\/div>\n            <div class=\"grid grid-cols-2 md:grid-cols-4 gap-4 md:gap-6 max-w-5xl mx-auto\">\n                \n                <!-- \u5757 1 (Item 1: \u542f\u7528 #t=2 \u89c6\u9891\u65f6\u95f4\u5207\u7247\uff0c\u5f7b\u5e95\u907f\u5f00\u5f00\u573a\u9ed1\u5c4f) -->\n                <div class=\"col-span-1 row-span-2 relative group overflow-hidden cursor-pointer bg-black border border-outline-variant min-h-[240px] dubbing-trigger\" data-index=\"0\">\n                    <video src=\"https:\/\/northbound-auto.com\/wp-content\/uploads\/2026\/06\/WhatsApp-Video-2026-06-01-at-6.37.35-PM-2.mp4#t=2\" class=\"absolute inset-0 w-full h-full object-cover opacity-80 group-hover:opacity-100 transition-opacity duration-300\" preload=\"metadata\" muted playsinline><\/video>\n                    <div class=\"absolute inset-0 flex items-center justify-center bg-black\/20 group-hover:bg-black\/40 transition-colors duration-300\"><span class=\"material-symbols-outlined text-white text-5xl drop-shadow-md\">play_circle<\/span><\/div>\n                    <div class=\"absolute top-0 left-0 p-4 w-full flex justify-between items-start text-white z-10\">\n                        <p contenteditable=\"true\" class=\"font-label-caps text-label-caps drop-shadow-sm\">Item 01<\/p>\n                        <span contenteditable=\"true\" class=\"text-[10px] font-nav-link drop-shadow-sm\">02:45<\/span>\n                    <\/div>\n                <\/div>\n                \n                <!-- \u5757 2 -->\n                <div class=\"col-span-1 row-span-1 relative group overflow-hidden cursor-pointer bg-black border border-outline-variant min-h-[120px] dubbing-trigger\" data-index=\"1\">\n                    <video src=\"https:\/\/northbound-auto.com\/wp-content\/uploads\/2026\/06\/WhatsApp-Video-2026-06-01-at-6.37.35-PM.mp4\" class=\"absolute inset-0 w-full h-full object-cover opacity-80 group-hover:opacity-100 transition-opacity duration-300\" preload=\"metadata\" muted playsinline><\/video>\n                    <div class=\"absolute inset-0 flex items-center justify-center bg-black\/20 group-hover:bg-black\/40 transition-colors duration-300\"><span class=\"material-symbols-outlined text-white text-4xl drop-shadow-md\">play_circle<\/span><\/div>\n                    <div class=\"absolute top-0 left-0 p-4 w-full flex justify-between items-start text-white z-10\">\n                        <p contenteditable=\"true\" class=\"font-label-caps text-label-caps drop-shadow-sm\">Item 02<\/p>\n                        <span contenteditable=\"true\" class=\"text-[10px] font-nav-link drop-shadow-sm\">01:20<\/span>\n                    <\/div>\n                <\/div>\n                \n                <!-- \u5757 3 -->\n                <div class=\"col-span-1 row-span-1 relative group overflow-hidden cursor-pointer bg-black border border-outline-variant min-h-[120px] dubbing-trigger\" data-index=\"2\">\n                    <video src=\"https:\/\/northbound-auto.com\/wp-content\/uploads\/2026\/06\/WhatsApp-Video-2026-06-01-at-6.37.28-PM.mp4\" class=\"absolute inset-0 w-full h-full object-cover opacity-80 group-hover:opacity-100 transition-opacity duration-300\" preload=\"metadata\" muted playsinline><\/video>\n                    <div class=\"absolute inset-0 flex items-center justify-center bg-black\/20 group-hover:bg-black\/40 transition-colors duration-300\"><span class=\"material-symbols-outlined text-white text-4xl drop-shadow-md\">play_circle<\/span><\/div>\n                    <div class=\"absolute top-0 left-0 p-4 w-full flex justify-between items-start text-white z-10\">\n                        <p contenteditable=\"true\" class=\"font-label-caps text-label-caps drop-shadow-sm\">Item 03<\/p>\n                        <span contenteditable=\"true\" class=\"text-[10px] font-nav-link drop-shadow-sm\">01:55<\/span>\n                    <\/div>\n                <\/div>\n                \n                <!-- \u5757 4 -->\n                <div class=\"col-span-1 row-span-2 relative group overflow-hidden cursor-pointer bg-black border border-outline-variant min-h-[240px] dubbing-trigger\" data-index=\"3\">\n                    <video src=\"https:\/\/northbound-auto.com\/wp-content\/uploads\/2026\/06\/WhatsApp-Video-2026-06-01-at-6.37.29-PM.mp4\" class=\"absolute inset-0 w-full h-full object-cover opacity-80 group-hover:opacity-100 transition-opacity duration-300\" preload=\"metadata\" muted playsinline><\/video>\n                    <div class=\"absolute inset-0 flex items-center justify-center bg-black\/20 group-hover:bg-black\/40 transition-colors duration-300\"><span class=\"material-symbols-outlined text-white text-5xl drop-shadow-md\">play_circle<\/span><\/div>\n                    <div class=\"absolute top-0 left-0 p-4 w-full flex justify-between items-start text-white z-10\">\n                        <p contenteditable=\"true\" class=\"font-label-caps text-label-caps drop-shadow-sm\">Item 04<\/p>\n                        <span contenteditable=\"true\" class=\"text-[10px] font-nav-link drop-shadow-sm\">05:12<\/span>\n                    <\/div>\n                <\/div>\n                \n                <!-- \u5757 5 (Item 5: \u542f\u7528 #t=1 \u89c6\u9891\u65f6\u95f4\u5207\u7247\uff0c\u52a0\u8f7d 1 \u79d2\u5904\u753b\u9762\uff0c\u9632\u9ed1\u5c4f) -->\n                <div class=\"col-span-1 row-span-1 relative group overflow-hidden cursor-pointer bg-black border border-outline-variant min-h-[120px] dubbing-trigger\" data-index=\"4\">\n                    <video src=\"https:\/\/northbound-auto.com\/wp-content\/uploads\/2026\/06\/WhatsApp-Video-2026-06-01-at-6.37.34-PM.mp4#t=1\" class=\"absolute inset-0 w-full h-full object-cover opacity-80 group-hover:opacity-100 transition-opacity duration-300\" preload=\"metadata\" muted playsinline><\/video>\n                    <div class=\"absolute inset-0 flex items-center justify-center bg-black\/20 group-hover:bg-black\/40 transition-colors duration-300\"><span class=\"material-symbols-outlined text-white text-4xl drop-shadow-md\">play_circle<\/span><\/div>\n                    <div class=\"absolute top-0 left-0 p-4 w-full flex justify-between items-start text-white z-10\">\n                        <p contenteditable=\"true\" class=\"font-label-caps text-label-caps drop-shadow-sm\">Item 05<\/p>\n                        <span contenteditable=\"true\" class=\"text-[10px] font-nav-link drop-shadow-sm\">00:45<\/span>\n                    <\/div>\n                <\/div>\n                \n                <!-- \u5757 6 -->\n                <div class=\"col-span-1 row-span-1 relative group overflow-hidden cursor-pointer bg-black border border-outline-variant min-h-[120px] dubbing-trigger\" data-index=\"5\">\n                    <video src=\"https:\/\/northbound-auto.com\/wp-content\/uploads\/2026\/06\/WhatsApp-Video-2026-06-01-at-6.37.35-PM-1.mp4\" class=\"absolute inset-0 w-full h-full object-cover opacity-80 group-hover:opacity-100 transition-opacity duration-300\" preload=\"metadata\" muted playsinline><\/video>\n                    <div class=\"absolute inset-0 flex items-center justify-center bg-black\/20 group-hover:bg-black\/40 transition-colors duration-300\"><span class=\"material-symbols-outlined text-white text-4xl drop-shadow-md\">play_circle<\/span><\/div>\n                    <div class=\"absolute top-0 left-0 p-4 w-full flex justify-between items-start text-white z-10\">\n                        <p contenteditable=\"true\" class=\"font-label-caps text-label-caps drop-shadow-sm\">Item 06<\/p>\n                        <span contenteditable=\"true\" class=\"text-[10px] font-nav-link drop-shadow-sm\">03:02<\/span>\n                    <\/div>\n                <\/div>\n\n            <\/div>\n        <\/section>\n\n        <!-- Audio Podcasts Section (\u7ffb\u5531\u5409\u4ed6\u5f39\u5531\u64ad\u653e\u677f\u5757 - \u5df2\u5e94\u7528\u9ed1\u767d\u5409\u4ed6\u4e3b\u56fe) -->\n        <section class=\"px-grid-margin mb-section-gap\">\n            <div class=\"text-center mb-16\">\n                <h2 contenteditable=\"true\" class=\"text-3xl font-semibold tracking-wide text-primary uppercase inline-block border-b-2 border-primary pb-4\">Audio Podcasts<\/h2>\n            <\/div>\n            <div class=\"bg-surface-container-low max-w-5xl mx-auto flex flex-col md:flex-row p-8 md:p-16 gap-12 items-center\">\n                <!-- \u5de6\u4fa7\u56fe\u7247\u6846\uff1a\u5df2\u914d\u7f6e\u9ed1\u767d\u6548\u679c\u7684 guitar.jpeg \u56fe -->\n                <div class=\"md:w-1\/3 w-full\">\n                    <div class=\"w-full aspect-square bg-surface-container border border-outline-variant overflow-hidden rounded shadow-sm\">\n                        <img decoding=\"async\" src=\"https:\/\/northbound-auto.com\/wp-content\/uploads\/2026\/06\/\u5409\u4ed62.jpeg\" class=\"w-full h-full object-cover grayscale\" alt=\"Guitar Podcast Cover\" title=\"AUDIO\">\n                    <\/div>\n                <\/div>\n                <div class=\"md:w-2\/3 flex flex-col justify-center\">\n                    <ul class=\"flex flex-col gap-6 w-full\" id=\"podcast-list\">\n                        \n                        <!-- \u64ad\u5ba2 1 (\u7ffb\u5531 1) -->\n                        <li class=\"podcast-item flex items-center justify-between group cursor-pointer border-b border-outline-variant pb-4 last:border-0 hover:border-primary transition-colors\" data-audio=\"https:\/\/northbound-auto.com\/wp-content\/uploads\/2026\/06\/20250222_230244_1.m4a.mp4\">\n                            <div class=\"flex items-center gap-6\">\n                                <span contenteditable=\"true\" class=\"font-headline-md text-headline-md text-secondary group-hover:text-primary transition-colors\">01<\/span>\n                                <div>\n                                    <h3 contenteditable=\"true\" class=\"font-body-lg text-body-lg text-primary\">\u6700\u540e\u4e00\u9875 &#8211;  Vocal &#038; Guitar<\/h3>\n                                  \n                                <\/div>\n                            <\/div>\n                            <span class=\"material-symbols-outlined text-outline group-hover:text-primary transition-colors play-btn-icon\">play_arrow<\/span>\n                        <\/li>\n                        \n                        <!-- \u64ad\u5ba2 2 (\u7ffb\u5531 2) -->\n                        <li class=\"podcast-item flex items-center justify-between group cursor-pointer border-b border-outline-variant pb-4 last:border-0 hover:border-primary transition-colors\" data-audio=\"https:\/\/northbound-auto.com\/wp-content\/uploads\/2026\/06\/il7au-2qh1z-001.aac\">\n                            <div class=\"flex items-center gap-6\">\n                                <span contenteditable=\"true\" class=\"font-headline-md text-headline-md text-secondary group-hover:text-primary transition-colors\">02<\/span>\n                                <div>\n                                    <h3 contenteditable=\"true\" class=\"font-body-lg text-body-lg text-primary\">\u7231\u4eba\u9519\u8fc7 &#8211; Vocal &#038; Guitar<\/h3>\n                \n                                <\/div>\n                            <\/div>\n                            <span class=\"material-symbols-outlined text-outline group-hover:text-primary transition-colors play-btn-icon\">play_arrow<\/span>\n                        <\/li>\n                        \n                        <!-- \u64ad\u5ba2 3 (\u7ffb\u5531 3) -->\n                        <li class=\"podcast-item flex items-center justify-between group cursor-pointer border-b border-outline-variant pb-4 last:border-0 hover:border-primary transition-colors\" data-audio=\"https:\/\/northbound-auto.com\/wp-content\/uploads\/2026\/06\/\u591a\u5e78\u8fd0.m4a.mp4\">\n                            <div class=\"flex items-center gap-6\">\n                                <span contenteditable=\"true\" class=\"font-headline-md text-headline-md text-secondary group-hover:text-primary transition-colors\">03<\/span>\n                                <div>\n                                    <h3 contenteditable=\"true\" class=\"font-body-lg text-body-lg text-primary\">\u591a\u5e78\u8fd0- Vocal &#038; Guitar<\/h3>\n                                    \n                                <\/div>\n                            <\/div>\n                            <span class=\"material-symbols-outlined text-outline group-hover:text-primary transition-colors play-btn-icon\">play_arrow<\/span>\n                        <\/li>\n                        \n                        <!-- \u64ad\u5ba2 4 (\u7ffb\u5531 4) -->\n                        <li class=\"podcast-item flex items-center justify-between group cursor-pointer border-b border-outline-variant pb-4 last:border-0 hover:border-primary transition-colors\" data-audio=\"https:\/\/northbound-auto.com\/wp-content\/uploads\/2026\/06\/\u7ea2\u8272\u9ad8\u8ddf\u978b.m4a.mp4\">\n                            <div class=\"flex items-center gap-6\">\n                                <span contenteditable=\"true\" class=\"font-headline-md text-headline-md text-secondary group-hover:text-primary transition-colors\">04<\/span>\n                                <div>\n                                    <h3 contenteditable=\"true\" class=\"font-body-lg text-body-lg text-primary\">\u7ea2\u8272\u9ad8\u8ddf\u978b &#8211; Vocal &#038; Guitar<\/h3>\n                                <\/div>\n                            <\/div>\n                            <span class=\"material-symbols-outlined text-outline group-hover:text-primary transition-colors play-btn-icon\">play_arrow<\/span>\n                        <\/li>\n\n                    <\/ul>\n                <\/div>\n            <\/div>\n        <\/section>\n    <\/main>\n\n    <!-- Voice Dubbing \u89c6\u9891\u64ad\u653e\u5f39\u7a97 (Modal) -->\n    <div id=\"video-modal\" class=\"fixed inset-0 z-50 flex items-center justify-center bg-black\/80 opacity-0 pointer-events-none transition-opacity duration-300\">\n        <div class=\"relative w-full max-w-4xl px-4 md:px-0\">\n            <button id=\"modal-close\" class=\"absolute -top-12 right-4 md:right-0 text-white hover:text-gray-300 transition-colors flex items-center\">\n                <span class=\"material-symbols-outlined text-3xl\">close<\/span>\n            <\/button>\n            <div class=\"bg-black aspect-video w-full rounded-lg overflow-hidden shadow-2xl border border-white\/10\">\n                <video id=\"modal-video\" class=\"w-full h-full\" controls src=\"\">\n                    \u60a8\u7684\u6d4f\u89c8\u5668\u4e0d\u652f\u6301 HTML5 \u89c6\u9891\u64ad\u653e\u3002\n                <\/video>\n            <\/div>\n        <\/div>\n    <\/div>\n\n    <!-- \u5168\u5c40\u9690\u5f62\u97f3\u9891\u64ad\u653e\u5668\u9a71\u52a8 -->\n    <audio id=\"global-audio-player\" class=\"hidden\"><\/audio>\n\n    <script>\n        function toggleDetail() {\n            const content = document.getElementById('description-content');\n            const btn = document.getElementById('detail-btn');\n            if (content.classList.contains('expanded')) { content.classList.remove('expanded'); btn.innerText = 'DETAIL'; }\n            else { content.classList.add('expanded'); btn.innerText = 'CLOSE'; }\n        }\n\n        document.addEventListener('DOMContentLoaded', () => {\n            \/\/ ------------------------------------------\n            \/\/ Sound Intro \u56fe\u7247\u8f6e\u64ad\u63a7\u5236\u903b\u8f91\n            \/\/ ------------------------------------------\n            const carouselImages = [\n                document.getElementById('carousel-img-0'),\n                document.getElementById('carousel-img-1')\n            ];\n            const indicators = [\n                document.getElementById('indicator-0'),\n                document.getElementById('indicator-1')\n            ];\n            const prevBtn = document.getElementById('carousel-prev');\n            const nextBtn = document.getElementById('carousel-next');\n\n            let carouselIndex = 0;\n            let carouselInterval;\n\n            function showSlide(index) {\n                if (index >= carouselImages.length) carouselIndex = 0;\n                else if (index < 0) carouselIndex = carouselImages.length - 1;\n                else carouselIndex = index;\n\n                carouselImages.forEach((img, i) => {\n                    if (i === carouselIndex) {\n                        img.classList.remove('opacity-0');\n                        img.classList.add('opacity-100');\n                        indicators[i].classList.remove('bg-white\/50');\n                        indicators[i].classList.add('bg-white');\n                    } else {\n                        img.classList.remove('opacity-100');\n                        img.classList.add('opacity-0');\n                        indicators[i].classList.remove('bg-white');\n                        indicators[i].classList.add('bg-white\/50');\n                    }\n                });\n            }\n\n            function startAutoplay() {\n                stopAutoplay();\n                carouselInterval = setInterval(() => {\n                    showSlide(carouselIndex + 1);\n                }, 4000); \n            }\n\n            function stopAutoplay() {\n                if (carouselInterval) clearInterval(carouselInterval);\n            }\n\n            prevBtn?.addEventListener('click', () => {\n                showSlide(carouselIndex - 1);\n                startAutoplay(); \n            });\n\n            nextBtn?.addEventListener('click', () => {\n                showSlide(carouselIndex + 1);\n                startAutoplay();\n            });\n\n            indicators.forEach((indicator, i) => {\n                indicator?.addEventListener('click', () => {\n                    showSlide(i);\n                    startAutoplay();\n                });\n            });\n\n            startAutoplay();\n\n            \/\/ ------------------------------------------\n            \/\/ Voice Dubbing \u89c6\u9891\u5f39\u7a97\u4e0e\u60ac\u505c\u9884\u89c8\u4ea4\u4e92\u63a7\u5236\u903b\u8f91\n            \/\/ ------------------------------------------\n            const dubbingVideos = [\n                \"https:\/\/northbound-auto.com\/wp-content\/uploads\/2026\/06\/WhatsApp-Video-2026-06-01-at-6.37.35-PM-2.mp4\",\n                \"https:\/\/northbound-auto.com\/wp-content\/uploads\/2026\/06\/WhatsApp-Video-2026-06-01-at-6.37.35-PM.mp4\",\n                \"https:\/\/northbound-auto.com\/wp-content\/uploads\/2026\/06\/WhatsApp-Video-2026-06-01-at-6.37.28-PM.mp4\",\n                \"https:\/\/northbound-auto.com\/wp-content\/uploads\/2026\/06\/WhatsApp-Video-2026-06-01-at-6.37.29-PM.mp4\",\n                \"https:\/\/northbound-auto.com\/wp-content\/uploads\/2026\/06\/WhatsApp-Video-2026-06-01-at-6.37.34-PM.mp4\",\n                \"https:\/\/northbound-auto.com\/wp-content\/uploads\/2026\/06\/WhatsApp-Video-2026-06-01-at-6.37.35-PM-1.mp4\"\n            ];\n\n            const videoModal = document.getElementById('video-modal');\n            const modalVideo = document.getElementById('modal-video');\n            const modalClose = document.getElementById('modal-close');\n            const dubbingTriggers = document.querySelectorAll('.dubbing-trigger');\n\n            dubbingTriggers.forEach(trigger => {\n                const index = parseInt(trigger.getAttribute('data-index'), 10);\n\n                \/\/ \u70b9\u51fb\u5361\u7247\uff0c\u52a0\u8f7d\u5bf9\u5e94\u9ad8\u7cbe\u89c6\u9891\u5e76\u5524\u9192\u5f39\u7a97\u64ad\u653e\n                trigger.addEventListener('click', () => {\n                    const videoUrl = dubbingVideos[index];\n                    if (videoUrl && videoModal && modalVideo) {\n                        modalVideo.src = videoUrl;\n                        videoModal.classList.remove('opacity-0', 'pointer-events-none');\n                        modalVideo.play();\n                    }\n                });\n\n                \/\/ \u9f20\u6807\u60ac\u505c\u5230\u5361\u7247\u4e0a\uff0c\u5e95\u5c42\u89c6\u9891\u5f00\u59cb\u5b89\u9759\u5730\u64ad\u653e\u9884\u89c8\n                const previewVideo = trigger.querySelector('video');\n                if (previewVideo) {\n                    \/\/ \u521d\u59cb\u5316\u8bbe\u7f6e\uff1aItem 1 (index 0) \u63d0\u65e9 2 \u79d2\u4ee5\u9632\u9ed1\u5c4f\uff1bItem 5 (index 4) \u63d0\u65e9 1 \u79d2\u9632\u9ed1\u5c4f\n                    if (index === 0) {\n                        previewVideo.currentTime = 2; \/\/ \u5feb\u8fdb\u5230 2 \u79d2\n                    } else if (index === 4) {\n                        previewVideo.currentTime = 1; \/\/ \u5feb\u8fdb\u5230 1 \u79d2\n                    }\n\n                    trigger.addEventListener('mouseenter', () => {\n                        previewVideo.play().catch(() => {});\n                    });\n                    \n                    \/\/ \u9f20\u6807\u79fb\u51fa\u5361\u7247\uff0c\u5e95\u5c42\u9884\u89c8\u89c6\u9891\u6682\u505c\uff0c\u5e76\u5c06\u5c01\u9762\u590d\u4f4d\u5b9a\u683c\u5728\u5bf9\u5e94\u7684\u65e0\u9ed1\u5c4f\u753b\u9762\n                    trigger.addEventListener('mouseleave', () => {\n                        previewVideo.pause();\n                        if (index === 0) {\n                            previewVideo.currentTime = 2;\n                        } else if (index === 4) {\n                            previewVideo.currentTime = 1;\n                        } else {\n                            previewVideo.currentTime = 0;\n                        }\n                    });\n                }\n            });\n\n            function closeVideoModal() {\n                if (videoModal && modalVideo) {\n                    videoModal.classList.add('opacity-0', 'pointer-events-none');\n                    modalVideo.pause();\n                    modalVideo.src = \"\";\n                }\n            }\n\n            modalClose?.addEventListener('click', closeVideoModal);\n            videoModal?.addEventListener('click', (e) => {\n                if (e.target === videoModal) {\n                    closeVideoModal();\n                }\n            });\n\n            \/\/ ------------------------------------------\n            \/\/ Audio Podcasts \u97f3\u9891\u5373\u65f6\u64ad\u653e\u9a71\u52a8\u903b\u8f91 (\u5df2\u914d\u7f6e 4 \u4e2a\u5409\u4ed6\u5f39\u5531\u94fe\u63a5)\n            \/\/ ------------------------------------------\n            const globalAudio = document.getElementById('global-audio-player');\n            const podcastItems = document.querySelectorAll('.podcast-item');\n\n            podcastItems.forEach(item => {\n                item.addEventListener('click', () => {\n                    const audioUrl = item.getAttribute('data-audio');\n                    const playBtnIcon = item.querySelector('.play-btn-icon');\n\n                    if (!globalAudio || !playBtnIcon) return;\n\n                    if (globalAudio.src === audioUrl && !globalAudio.paused) {\n                        globalAudio.pause();\n                        playBtnIcon.textContent = 'play_arrow';\n                    } else {\n                        podcastItems.forEach(pi => {\n                            const icon = pi.querySelector('.play-btn-icon');\n                            if (icon) icon.textContent = 'play_arrow';\n                        });\n\n                        globalAudio.src = audioUrl;\n                        globalAudio.play();\n                        playBtnIcon.textContent = 'pause';\n                    }\n                });\n            });\n\n            globalAudio?.addEventListener('ended', () => {\n                podcastItems.forEach(pi => {\n                    const icon = pi.querySelector('.play-btn-icon');\n                    if (icon) icon.textContent = 'play_arrow';\n                });\n            });\n\n            const isAdmin = document.body.classList.contains('logged-in');\n            if (!isAdmin) {\n                document.querySelectorAll('[contenteditable=\"true\"]').forEach(el => {\n                    el.removeAttribute('contenteditable');\n                });\n            }\n        });\n    <\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Audio &#8211; Archive Sound Intro chevron_left chevron_right \u300aVoice Cover\u300b I am skilled in dubbing anime, radio dramas, audiobooks, and more. [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"_uag_custom_page_level_css":"","site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-23","page","type-page","status-publish","hentry"],"acf":[],"uagb_featured_image_src":{"full":false,"thumbnail":false,"medium":false,"medium_large":false,"large":false,"1536x1536":false,"2048x2048":false},"uagb_author_info":{"display_name":"JINLEI","author_link":"https:\/\/northbound-auto.com\/?author=1"},"uagb_comment_info":0,"uagb_excerpt":"Audio &#8211; Archive Sound Intro chevron_left chevron_right \u300aVoice Cover\u300b I am skilled in dubbing anime, radio dramas, audiobooks, and more. [&hellip;]","_links":{"self":[{"href":"https:\/\/northbound-auto.com\/index.php?rest_route=\/wp\/v2\/pages\/23","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/northbound-auto.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/northbound-auto.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/northbound-auto.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/northbound-auto.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=23"}],"version-history":[{"count":3,"href":"https:\/\/northbound-auto.com\/index.php?rest_route=\/wp\/v2\/pages\/23\/revisions"}],"predecessor-version":[{"id":186,"href":"https:\/\/northbound-auto.com\/index.php?rest_route=\/wp\/v2\/pages\/23\/revisions\/186"}],"wp:attachment":[{"href":"https:\/\/northbound-auto.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=23"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}