- \n
- HTML Audio\/Video DOM Reference<\/a><\/li>\n<\/ul>\n
--<\/p>\n
\u4e00\u3001\u4f7f\u7528\u6309\u9215\u63a7\u5236<\/h2>\n
- \n
- play() \u64ad\u653e<\/li>\n
- pause() \u66ab\u505c<\/li>\n
- \u97f3\u91cf\u63a7\u5236\u5f9e 0 \u5230 1<\/li>\n<\/ul>\n
\u9996\u5148\u88fd\u4f5c\u4e00\u500b\u4f7f\u7528\u7368\u7acb\u7684\u6309\u9215\u4f86\u63a7\u5236\u64ad\u653e\u3002\u5305\u542b\u64ad\u653e\u3001\u66ab\u505c\u3001\u97f3\u91cf\u63a7\u5236\uff0c<audio> \u6c92\u6709\u505c\u6b62\u529f\u80fd\uff0c\u66ab\u505c\u53ef\u4ee5\u8aaa\u5c31\u662f\u505c\u6b62<\/p>\n
<!DOCTYPE html>\r\n<html lang=\"zh-Hant\">\r\n<head>\r\n <meta charset=\"utf-8\">\r\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\r\n <title>Hoyo \u6559\u4f60\u81ea\u88fd\u64ad\u653e\u4ecb\u9762<\/title>\r\n<\/head>\r\n<body>\r\n<audio src=\"https:\/\/www.chosic.com\/wp-content\/uploads\/2021\/02\/Fluffing-a-Duck.mp3\" id=\"audio\" controls><\/audio>\r\n\r\n<div>\r\n <button type=\"button\" onclick=\"play()\">\u64ad\u653e<\/button>\r\n <button type=\"button\" onclick=\"pause()\">\u66ab\u505c<\/button>\r\n <button type=\"button\" onclick=\"volume(0)\">\u975c\u97f3<\/button>\r\n <button type=\"button\" onclick=\"volume(0.5)\">50% \u97f3\u91cf<\/button>\r\n <button type=\"button\" onclick=\"volume(1)\">\u6700\u5927\u97f3\u91cf<\/button>\r\n<\/div>\r\n\r\n<script>\r\n let audio = document.getElementById(\"audio\");\r\n\r\n \/\/ \u64ad\u653e\r\n function play(){\r\n audio.play();\r\n }\r\n\r\n \/\/ \u66ab\u505c\r\n function pause(){\r\n audio.pause();\r\n }\r\n\r\n \/\/ \u97f3\u91cf\u5927\u5c0f\r\n function volume(val){\r\n audio.volume = val;\r\n }\r\n<\/script>\r\n<\/body>\r\n<\/html><\/pre>\n![\"\"](\"https:\/\/blog.hoyo.idv.tw\/wp-content\/uploads\/2018\/12\/2023-02-23-17-19-37.png\")
<\/p>\n\u73fe\u6210\u7684\u6a94\u6848\u5728\u9019\u88e1\u00a002_audio<\/a><\/p>\n
--<\/p>\n
\u4e8c\u3001\u6ed1\u52d5\u63a7\u5236\u97f3\u91cf<\/h2>\n
- \n
- volume \u6307\u5b9a\u4e00\u500b 0~1 \u7684\u6578\u503c\u5c31\u53ef\u4ee5\u63a7\u5236\u97f3\u91cf<\/li>\n<\/ul>\n
\u9810\u8a2d\u7684\u97f3\u91cf\u63a7\u5236\u662f\u9644\u5c6c\u7684\uff0c\u53ef\u80fd\u53ea\u8981\u7684\u97f3\u91cf\u90fd\u9084\u662f\u7528\u672c\u8eab\u4e3b\u8981\u63a7\u5236\uff0c\u6240\u4ee5\u73fe\u5728\u8981\u7d66\u4e00\u500b\u7368\u7acb\u7684\u63a7\u5236<\/p>\n
<!DOCTYPE html>\r\n<html lang=\"zh-Hant\">\r\n<head>\r\n <meta charset=\"utf-8\">\r\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\r\n <title>Hoyo \u6559\u4f60\u81ea\u88fd\u64ad\u653e\u4ecb\u9762<\/title>\r\n <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/jquery\/3.6.0\/jquery.min.js\"><\/script>\r\n<\/head>\r\n<body>\r\n<audio src=\"https:\/\/www.chosic.com\/wp-content\/uploads\/2022\/10\/Kevin-MacLeod-Investigations.mp3\" id=\"audio\" controls><\/audio>\r\n<div>\r\n <button type=\"button\" onclick=\"play()\">\u64ad\u653e<\/button>\r\n <button type=\"button\" onclick=\"pause()\">\u66ab\u505c<\/button>\r\n <label style=\"width: 100%;\"><input type=\"range\" class=\"volumeGain\" min=\"0\" max=\"100\" step=\"1\" value=\"50\"><\/label>\r\n<\/div>\r\n\r\n<script>\r\n var audio = document.getElementById(\"audio\");\r\n\r\n \/\/ \u64ad\u653e\r\n function play(){\r\n audio.play();\r\n }\r\n\r\n \/\/ \u66ab\u505c\r\n function pause(){\r\n audio.pause();\r\n }\r\n\r\n \/\/ \u53d6\u5f97\u97f3\u91cf\u6ed1\u8ecc \u63a7\u5236\u97f3\u91cf\r\n $('.volumeGain').on('input change', function(){\r\n var val = $(this).val();\r\n audio.volume = val \/ 100;\r\n });\r\n<\/script>\r\n<\/body>\r\n<\/html><\/pre>\n![\"\"](\"https:\/\/blog.hoyo.idv.tw\/wp-content\/uploads\/2018\/12\/2023-02-23-17-24-00.png\")
<\/p>\n\u73fe\u6210\u7684\u6a94\u6848\u5728\u9019\u88e1\u00a003_audio<\/a><\/p>\n
--<\/p>\n
\u4e09\u3001\u64ad\u653e\u9032\u5ea6\u53ca\u63a7\u5236<\/h2>\n
audio.currentTime\u5373\u53ef\u5f97\u5230\u64ad\u653e\u9032\u5ea6\uff0c\u4f8b\u5982\u589e\u52a0\u4e0b\u5217\u7a0b\u5f0f\u78bc\u5373\u53ef\u591a\u4e00\u500b\u67e5\u8a62\u9032\u5ea6\u7684\u6309\u9215\uff0c\u55ae\u4f4d\u70ba\u79d2<\/p>\n
<button type=\"button\" onclick=\"getCurrentTime()\">\u64ad\u653e\u9032\u5ea6<\/button>\r\n<script>\r\n function getCurrentTime(){\r\n alert(audio.currentTime);\r\n }\r\n<\/script><\/pre>\n\u6307\u5b9a\u6578\u503c\u5373\u53ef\u8df3\u8f49\uff0c\u4f8b\u5982\u589e\u52a0\u4ee5\u4e0b\u7a0b\u5f0f\u78bc\u5c31\u53ef\u4ee5\u7acb\u523b\u8df3\u5230 30 \u79d2\u8655<\/span><\/p>\n
<button type=\"button\" onclick=\"setCurrentTime(30)\">\u8df3\u5230 30 \u79d2\u8655<\/button>\r\n<script>\r\n function setCurrentTime(val){\r\n audio.currentTime = val;\r\n }\r\n<\/script><\/pre>\n![\"\"](\"https:\/\/blog.hoyo.idv.tw\/wp-content\/uploads\/2018\/12\/hoyo_web_audio_api_02_03.png\")
<\/p>\n
- volume \u6307\u5b9a\u4e00\u500b 0~1 \u7684\u6578\u503c\u5c31\u53ef\u4ee5\u63a7\u5236\u97f3\u91cf<\/li>\n<\/ul>\n
![\"\"](\"https:\/\/blog.hoyo.idv.tw\/wp-content\/uploads\/2018\/12\/hoyo_web_audio_api_02_04.png\")
<\/p>\n