{"id":577,"date":"2025-12-07T10:02:12","date_gmt":"2025-12-07T02:02:12","guid":{"rendered":"https:\/\/www.52runoob.com\/?p=577"},"modified":"2025-12-07T10:02:12","modified_gmt":"2025-12-07T02:02:12","slug":"javascript-audio-%e5%af%b9%e8%b1%a1%e7%9f%a5%e8%af%86%e7%82%b9%e6%95%b4%e7%90%86","status":"publish","type":"post","link":"https:\/\/www.52runoob.com\/index.php\/2025\/12\/07\/javascript-audio-%e5%af%b9%e8%b1%a1%e7%9f%a5%e8%af%86%e7%82%b9%e6%95%b4%e7%90%86\/","title":{"rendered":"JavaScript\u00a0Audio\u00a0\u5bf9\u8c61\u77e5\u8bc6\u70b9\u6574\u7406"},"content":{"rendered":"\n

\u4e0b\u9762\u7ed9\u4f60\u4e00\u4efd \u300aJavaScript Audio \u5bf9\u8c61\u77e5\u8bc6\u70b9\u6574\u7406\uff08\u6700\u5168\u6700\u6e05\u6670\uff09\u300b<\/strong>\uff0c\u6db5\u76d6\u57fa\u7840\u7528\u6cd5\u3001\u5c5e\u6027\u65b9\u6cd5\u3001\u4e8b\u4ef6\u3001\u5b9e\u6218\u6280\u5de7<\/strong>\uff0c\u975e\u5e38\u9002\u5408\u505a\u7b14\u8bb0\u6216\u5199\u6559\u7a0b\u3002<\/p>\n\n\n\n

\n\n\n\n

\ud83c\udfb5 JavaScript Audio \u5bf9\u8c61\u77e5\u8bc6\u70b9\u6574\u7406\uff08Audio API \u5168\u9762\u603b\u7ed3\uff09<\/h1>\n\n\n\n

JavaScript \u4e2d\u64ad\u653e\u97f3\u9891\u901a\u5e38\u6709\u4e24\u79cd\u65b9\u5f0f\uff1a<\/p>\n\n\n\n

    \n
  1. \u4f7f\u7528 HTML <audio><\/code> \u6807\u7b7e<\/strong><\/li>\n\n\n\n
  2. \u4f7f\u7528 JavaScript \u7684 Audio<\/code> \u5bf9\u8c61\uff08HTMLAudioElement\uff09<\/strong><\/li>\n<\/ol>\n\n\n\n

    \u4f60\u53ef\u4ee5\u7406\u89e3\u4e3a\uff1a
    new Audio() = \u521b\u5efa\u4e00\u4e2a \u5143\u7d20<\/strong><\/p>\n\n\n\n

    \n\n\n\n

    \u2b50 1. Audio \u5bf9\u8c61\u7684\u521b\u5efa\u65b9\u5f0f<\/h1>\n\n\n\n

    \u2714 \u65b9\u5f0f\u4e00\uff1a\u76f4\u63a5 new Audio()<\/h3>\n\n\n
    \nconst audio = new Audio('music.mp3');\naudio.play();\n\n<\/pre><\/div>\n\n\n
    \u2714 \u65b9\u5f0f\u4e8c\uff1a\u901a\u8fc7 DOM \u83b7\u53d6<\/h3>\n\n\n
    \n&lt;audio id="bg" src="music.mp3">&lt;\/audio>\n\n<\/pre><\/div>\n\n
    \nconst audio = document.getElementById('bg');\naudio.play();\n\n<\/pre><\/div>\n\n\n
    \u4e24\u8005\u6700\u7ec8\u90fd\u5f97\u5230\u540c\u4e00\u4e2a\u7c7b\u578b\uff1aHTMLAudioElement<\/strong><\/p>\n\n\n\n
    \n\n\n\n
    \u2b50 2. \u5e38\u7528\u5c5e\u6027\uff08\u5fc5\u987b\u638c\u63e1\uff09<\/h1>\n\n\n\n
    \u5c5e\u6027<\/th>\u8bf4\u660e<\/th><\/tr><\/thead>
    src<\/code><\/td>\u97f3\u9891\u8def\u5f84<\/td><\/tr>
    currentTime<\/code><\/td>\u5f53\u524d\u64ad\u653e\u65f6\u95f4(\u79d2)<\/td><\/tr>
    duration<\/code><\/td>\u97f3\u9891\u603b\u65f6\u957f\uff08\u79d2\uff09<\/td><\/tr>
    paused<\/code><\/td>\u662f\u5426\u6682\u505c\u72b6\u6001\uff08\u53ea\u8bfb\uff09<\/td><\/tr>
    loop<\/code><\/td>\u662f\u5426\u5faa\u73af\u64ad\u653e<\/td><\/tr>
    volume<\/code><\/td>\u97f3\u91cf\uff080~1\uff09<\/td><\/tr>
    muted<\/code><\/td>\u662f\u5426\u9759\u97f3<\/td><\/tr>
    autoplay<\/code><\/td>\u662f\u5426\u81ea\u52a8\u64ad\u653e<\/td><\/tr>
    controls<\/code><\/td>\u662f\u5426\u663e\u793a\u539f\u751f\u63a7\u4ef6<\/td><\/tr>
    playbackRate<\/code><\/td>\u64ad\u653e\u901f\u5ea6<\/td><\/tr>
    ended<\/code><\/td>\u662f\u5426\u64ad\u653e\u7ed3\u675f\uff08\u53ea\u8bfb\uff09<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
    \u5e38\u7528\u793a\u4f8b<\/h3>\n\n\n
    \naudio.volume = 0.5;\naudio.currentTime = 10;\naudio.loop = true;\naudio.playbackRate = 1.25;\n\n<\/pre><\/div>\n\n\n
    \n\n\n\n
    \u2b50 3. \u5e38\u7528\u65b9\u6cd5\uff08\u64cd\u4f5c\u97f3\u9891\uff09<\/h1>\n\n\n\n
    \u65b9\u6cd5<\/th>\u8bf4\u660e<\/th><\/tr><\/thead>
    play()<\/code><\/td>\u64ad\u653e\uff08Promise\uff09<\/td><\/tr>
    pause()<\/code><\/td>\u6682\u505c<\/td><\/tr>
    load()<\/code><\/td>\u91cd\u65b0\u52a0\u8f7d\u97f3\u9891<\/td><\/tr>
    canPlayType(type)<\/code><\/td>\u662f\u5426\u652f\u6301\u8be5\u683c\u5f0f<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
    \u793a\u4f8b\uff1a<\/h3>\n\n\n
    \naudio.play();\naudio.pause();\naudio.currentTime = 0;  \/\/ \u91cd\u65b0\u5f00\u59cb\n\n<\/pre><\/div>\n\n\n
    \n\n\n\n
    \u2b50 4. Audio \u7684\u5e38\u7528\u4e8b\u4ef6\uff08\u975e\u5e38\u91cd\u8981\uff09<\/h1>\n\n\n\n
    \u4e8b\u4ef6\u540d<\/th>\u89e6\u53d1\u65f6\u673a<\/th><\/tr><\/thead>
    play<\/code><\/td>\u8c03\u7528\u4e86 play()<\/td><\/tr>
    pause<\/code><\/td>\u8c03\u7528\u4e86 pause()<\/td><\/tr>
    ended<\/code><\/td>\u64ad\u653e\u7ed3\u675f<\/td><\/tr>
    timeupdate<\/code><\/td>\u64ad\u653e\u8fdb\u5ea6\u6539\u53d8<\/td><\/tr>
    loadeddata<\/code><\/td>\u5a92\u4f53\u8d44\u6e90\u52a0\u8f7d\u5b8c\u6210<\/td><\/tr>
    error<\/code><\/td>\u64ad\u653e\u9519\u8bef<\/td><\/tr>
    canplay<\/code><\/td>\u53ef\u4ee5\u5f00\u59cb\u64ad\u653e<\/td><\/tr>
    progress<\/code><\/td>\u52a0\u8f7d\u6570\u636e\u4e2d<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
    \u793a\u4f8b\uff1a<\/h3>\n\n\n
    \naudio.addEventListener('timeupdate', () => {\n  console.log(audio.currentTime);\n});\n\naudio.addEventListener('ended', () => {\n  console.log('\u64ad\u653e\u7ed3\u675f');\n});\n\n<\/pre><\/div>\n\n\n
    \n\n\n\n
    \u2b50 5. Audio \u8fdb\u9636\u4f7f\u7528\u6280\u5de7\uff08\u5b9e\u6218\u91cd\u70b9\uff09<\/h1>\n\n\n\n
    \n\n\n\n
    \u2714 1\uff09\u6d4f\u89c8\u5668\u9ed8\u8ba4\u7981\u6b62\u81ea\u52a8\u64ad\u653e\uff08Autoplay Policy\uff09<\/h2>\n\n\n\n
    \u5982\u679c\u4f60\u8fd9\u6837\u5199\uff1a<\/p>\n\n\n
    \naudio.play();\n\n<\/pre><\/div>\n\n\n
    \u6d4f\u89c8\u5668\u53ef\u80fd\u4f1a\u62a5\u9519\uff1a<\/p>\n\n\n\n
    \n
    Uncaught (in promise) DOMException: play() failed because the user didn’t interact with the document first.<\/p>\n<\/blockquote>\n\n\n\n
    \u5e94\u5bf9\u65b9\u6cd5\uff1a<\/p>\n\n\n\n
    \u2714 \u8ba9\u7528\u6237\u5148\u70b9\u51fb
    \u2714 \u6216\u8bbe\u7f6e\u4e3a\u9759\u97f3 autoPlay\uff08\u89c6\u9891\u5e38\u7528\uff09<\/p>\n\n\n
    \naudio.muted = true;\naudio.play();\n\n<\/pre><\/div>\n\n\n
    \n\n\n\n
    \u2714 2\uff09\u5b9e\u65f6\u5c55\u793a\u64ad\u653e\u8fdb\u5ea6<\/h2>\n\n\n
    \naudio.addEventListener('timeupdate', () => {\n  progress.value = audio.currentTime \/ audio.duration * 100;\n});\n\n<\/pre><\/div>\n\n\n
    \n\n\n\n
    \u2714 3\uff09\u64ad\u653e\u5b8c\u6210\u540e\u91cd\u65b0\u5f00\u59cb<\/h2>\n\n\n
    \naudio.addEventListener('ended', () => {\n  audio.currentTime = 0;\n  audio.play();\n});\n\n<\/pre><\/div>\n\n\n
    \u6216\u76f4\u63a5\uff1a<\/p>\n\n\n
    \naudio.loop = true;\n\n<\/pre><\/div>\n\n\n
    \n\n\n\n
    \u2714 4\uff09\u6539\u53d8\u64ad\u653e\u901f\u5ea6<\/h2>\n\n\n
    \naudio.playbackRate = 2;  \/\/ 2\u500d\u901f\n\n<\/pre><\/div>\n\n\n
    \n\n\n\n
    \u2714 5\uff09\u9884\u52a0\u8f7d\u63a7\u5236<\/h2>\n\n\n
    \n&lt;audio preload="none">&lt;\/audio>\n\n<\/pre><\/div>\n\n\n
    preload<\/code> \u53ef\u9009\u503c\uff1a<\/p>\n\n\n\n
    \u503c<\/th>\u542b\u4e49<\/th><\/tr><\/thead>
    none<\/td>\u4e0d\u9884\u52a0\u8f7d<\/td><\/tr>
    metadata<\/td>\u53ea\u52a0\u8f7d\u5143\u6570\u636e\uff08\u65f6\u957f\u7b49\uff09<\/td><\/tr>
    auto<\/td>\u5c3d\u91cf\u81ea\u52a8\u52a0\u8f7d<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
    \n\n\n\n
    \u2b50 6. Audio \u5bf9\u8c61 vs Web Audio API\uff08\u9762\u8bd5\u5e38\u95ee\uff09<\/h1>\n\n\n\n
    \u5bf9\u6bd4\u9879<\/th>Audio \u5bf9\u8c61<\/th>Web Audio API<\/th><\/tr><\/thead>
    \u7528\u9014<\/td>\u7b80\u5355\u64ad\u653e<\/td>\u4e13\u4e1a\u97f3\u9891\u5904\u7406<\/td><\/tr>
    \u63a7\u5236\u7c92\u5ea6<\/td>\u4f4e<\/td>\u9ad8\uff08\u6df7\u97f3\u3001\u6ee4\u6ce2\u5668\u3001\u9891\u8c31\u5206\u6790\uff09<\/td><\/tr>
    \u4f7f\u7528\u96be\u5ea6<\/td>\u7b80\u5355<\/td>\u590d\u6742<\/td><\/tr>
    \u662f\u5426\u80fd\u505a\u53ef\u89c6\u5316<\/td>\u274c<\/td>\u2714\uff08\u9891\u8c31\u3001\u97f3\u6548\uff09<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
    \n\n\n\n
    \u2b50 7. \u5e38\u89c1\u5b9e\u6218\u4ee3\u7801\u7247\u6bb5\u5408\u96c6<\/h1>\n\n\n\n
    \n\n\n\n
    \u2714 \u5207\u6362\u64ad\u653e\/\u6682\u505c\u6309\u94ae<\/h2>\n\n\n
    \nif (audio.paused) {\n  audio.play();\n} else {\n  audio.pause();\n}\n\n<\/pre><\/div>\n\n\n
    \n\n\n\n
    \u2714 \u5224\u65ad\u6d4f\u89c8\u5668\u652f\u6301\u54ea\u79cd\u97f3\u9891\u683c\u5f0f<\/h2>\n\n\n
    \naudio.canPlayType('audio\/mp3');  \/\/ maybe \/ probably \/ ""\naudio.canPlayType('audio\/ogg');\n\n<\/pre><\/div>\n\n\n
    \n\n\n\n
    \u2714 \u97f3\u91cf\u6e10\u53d8\uff08\u6de1\u5165\u6de1\u51fa\uff09<\/h2>\n\n\n
    \nlet vol = 0;\naudio.volume = 0;\naudio.play();\n\nconst timer = setInterval(() => {\n  if (vol &lt; 1) {\n    vol += 0.1;\n    audio.volume = vol;\n  } else {\n    clearInterval(timer);\n  }\n}, 100);\n\n<\/pre><\/div>\n\n\n
    \n\n\n\n
    \ud83c\udfaf 8. Audio \u77e5\u8bc6\u70b9\u5927\u603b\u7ed3\uff0830 \u79d2\u80cc\u8bf5\u7248\u672c\uff09<\/h1>\n\n\n\n
    \n
    Audio<\/code> \u5bf9\u8c61\u662f HTMLAudioElement<\/code>\uff0c\u672c\u8d28\u662f <audio><\/code> \u6807\u7b7e\u3002
    \u4e3b\u8981\u5c5e\u6027\u6709 src\u3001currentTime\u3001duration\u3001volume\u3001loop\u3001muted\u3002
    \u5e38\u7528\u65b9\u6cd5\u4e3a play()\u3001pause()\u3001load()\u3002
    \u5e38\u7528\u4e8b\u4ef6\u5305\u62ec timeupdate\u3001ended\u3001play\u3001pause\u3001loadeddata\u3002
    \u6d4f\u89c8\u5668\u6709\u81ea\u52a8\u64ad\u653e\u9650\u5236\uff0c\u9700\u8981\u7528\u6237\u4ea4\u4e92\u3002
    Audio \u9002\u5408\u7b80\u5355\u64ad\u653e\uff0c\u590d\u6742\u97f3\u9891\u5904\u7406\u4f7f\u7528 Web Audio API\u3002<\/p>\n<\/blockquote>\n","protected":false},"excerpt":{"rendered":"
    \u4e0b\u9762\u7ed9\u4f60\u4e00\u4efd \u300aJavaScript Audio \u5bf9\u8c61\u77e5\u8bc6\u70b9\u6574\u7406\uff08\u6700\u5168\u6700\u6e05\u6670\uff09\u300b… Continue Reading →<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[49],"tags":[],"class_list":["post-577","post","type-post","status-publish","format-standard","hentry","category-javascript"],"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/posts\/577","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/comments?post=577"}],"version-history":[{"count":1,"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/posts\/577\/revisions"}],"predecessor-version":[{"id":578,"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/posts\/577\/revisions\/578"}],"wp:attachment":[{"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/media?parent=577"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/categories?post=577"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/tags?post=577"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}