音频播放兼容多浏览器

.gitignore

@@ -1 +1,2 @@
-node_modules/
+node_modules/
+raw.js

README.md

@@ -9,22 +9,27 @@
 在你的网页`</body>`标签之前添加以下内容：
 
 ```
-<!-- 位置可自定义 -->
+<!------ 位置可自定义 ------>
 <div class="Canvas" style="position: fixed; right: 10px; bottom: 10px;z-index: 99999999" id="L2dCanvas"></div>
 
-<!-- 依赖JS -->
+<!------ 依赖 JS | Dependent JS ------>
+<!---- 可选 | Optional ---->
+<!-- 兼容低版本浏览器 | Compatible with low-level browsers -->
 <script src="https://cdn.jsdelivr.net/npm/promise-polyfill@8/dist/polyfill.min.js"> </script>
+<!-- 音频播放兼容 | Audio playback compatible -->
+<script src="https://cdn.jsdelivr.net/npm/howler@2.1.3/dist/howler.min.js"></script>
+<!---- 必需 | Required ---->
 <script src="https://cubism.live2d.com/sdk-web/cubismcore/live2dcubismcore.min.js"></script>
 <script src="https://cdn.jsdelivr.net/npm/pixi.js@4.6.1/dist/pixi.min.js"></script>
 <!-- live2dv3.js -->
-<script src="https://cdn.jsdelivr.net/npm/live2dv3@1.2.0/live2dv3.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/live2dv3@1.2.1/live2dv3.min.js"></script>
 
-<!-- 加载Live2d模型 -->
+<!------ 加载Live2d模型 | Load Live2d model ------>
 <script>
     window.onload = () => {
         new l2dViewer({
             el: document.getElementById('L2dCanvas'), // 要添加Live2d的元素, 支持dom选择器和jq选择器
-            basePath: 'https://cdn.jsdelivr.net/gh/HCLonely/Live2dV3@latest/assets', // 模型根目录
+            basePath: 'https://cdn.jsdelivr.net/npm/live2dv3@latest/assets', // 模型根目录
             modelName: 'biaoqiang_3', // 模型名称
             width: 500,
             height: 300,

index.html

@@ -14,22 +14,23 @@ <h1>第一次加载较慢，请耐心等待！</h1>
     <div class="Canvas" style="position: fixed; right: 10px; bottom: 10px;z-index: 99999999" id="L2dCanvas"></div>
 
     <script src="https://cdn.jsdelivr.net/npm/promise-polyfill@8/dist/polyfill.min.js"> </script>
+    <script src="https://cdn.jsdelivr.net/npm/howler@2.1.3/dist/howler.min.js"></script>
     <script src="https://cubism.live2d.com/sdk-web/cubismcore/live2dcubismcore.min.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/pixi.js@4.6.1/dist/pixi.min.js"></script>
     <script src="/live2dv3.js"></script>
     <script>
         window.onload = () => {
             new l2dViewer({
                 el: document.getElementById('L2dCanvas'),
-                basePath: 'https://cdn.jsdelivr.net/npm/live2dv3@1.2.0/assets',
+                basePath: 'https://cdn.jsdelivr.net/npm/live2dv3@latest/assets',
                 modelName: 'biaoqiang_3',
                 width: 500,
                 height: 300,
                 sizeLimit: false,
                 mobileLimit: false,
                 sounds: [
                     'sounds/demo.mp3',
-                    'https://cdn.jsdelivr.net/npm/live2dv3@1.2.0/assets/biaoqiang_3/sounds/demo.mp3'
+                    'https://cdn.jsdelivr.net/npm/live2dv3@latest/assets/biaoqiang_3/sounds/demo.mp3'
                 ]
             })
         }

live2dv3.js

@@ -1707,10 +1707,12 @@ class l2dViewer { // eslint-disable-line no-unused-vars
         if (sounds && sounds.length > 0) {
           const soundFile = sounds[Math.floor((Math.random() * sounds.length))]
           const filePath = /^https?:\/\//.test(soundFile) ? soundFile : [basePath, modelName, soundFile].join('/').replace(/(?<!:)\/\//g, '/')
-          try {
+          if (typeof Howl !== 'undefined') {
+            new Howl({ src: [filePath] }).play()
+          } else if (typeof Audio !== 'undefined') {
             new Audio(filePath).play()
-          } catch (e) {
-            console.error('Sound playback failed:', e)
+          } else {
+            console.error('Current browser does not support playing sound.')
           }
         }
       }
@@ -1855,7 +1857,7 @@ class l2dViewer { // eslint-disable-line no-unused-vars
     }
   }
 }
-const VERSION = '1.2.0'
+const VERSION = '1.2.1'
 function sayHello () {
   var _a
   if (navigator.userAgent.toLowerCase().indexOf('chrome') > -1) {

package.json

@@ -1,10 +1,10 @@
 {
   "name": "live2dv3",
-  "version": "1.2.0",
+  "version": "1.2.1",
   "description": "在网页上添加 moc3 格式的Live2d模型 https://live2dv3demo.hclonely.com/",
   "main": "live2dv3.js",
   "scripts": {
-    "test": "standard live2dv3.js --verbose | snazzy",
+    "test": "standard live2dv3.js --fix --verbose | snazzy",
     "build": "standard live2dv3.js --fix"
   },
   "repository": {
@@ -30,7 +30,8 @@
       "PIXI",
       "Live2DCubismCore",
       "HTMLElement",
-      "Audio"
+      "Audio",
+      "Howl"
     ]
   }
 }