diff --git a/Web/VisualStudioTemplate/OpenSiv3D(0.6.0)Web/MyTemplate.vstemplate b/Web/VisualStudioTemplate/OpenSiv3D(0.6.0)Web/MyTemplate.vstemplate
index eb5f8231d..fe9c19093 100644
--- a/Web/VisualStudioTemplate/OpenSiv3D(0.6.0)Web/MyTemplate.vstemplate
+++ b/Web/VisualStudioTemplate/OpenSiv3D(0.6.0)Web/MyTemplate.vstemplate
@@ -176,6 +176,8 @@
       <ProjectItem ReplaceParameters="false" TargetFileName="32.png">resources\engine\texture\box-shadow\32.png</ProjectItem>
       <ProjectItem ReplaceParameters="false" TargetFileName="64.png">resources\engine\texture\box-shadow\64.png</ProjectItem>
       <ProjectItem ReplaceParameters="false" TargetFileName="8.png">resources\engine\texture\box-shadow\8.png</ProjectItem>
+      <ProjectItem ReplaceParameters="false" TargetFileName="web-player.html">Templates\Embeddable\web-player.html</ProjectItem>
+      <ProjectItem ReplaceParameters="false" TargetFileName="web-player.js">Templates\Embeddable\web-player.js</ProjectItem>
     </Project>
   </TemplateContent>
 </VSTemplate>
\ No newline at end of file
diff --git a/Web/VisualStudioTemplate/OpenSiv3D(0.6.0)Web/Siv3DTest.vcxproj b/Web/VisualStudioTemplate/OpenSiv3D(0.6.0)Web/Siv3DTest.vcxproj
index 5e3108dd3..9f03c6661 100644
--- a/Web/VisualStudioTemplate/OpenSiv3D(0.6.0)Web/Siv3DTest.vcxproj
+++ b/Web/VisualStudioTemplate/OpenSiv3D(0.6.0)Web/Siv3DTest.vcxproj
@@ -253,16 +253,23 @@
     <Media Include="example\test.mp3" />
     <Media Include="example\video\river.mp4" />
   </ItemGroup>
+  <ItemGroup>
+    <None Include="Templates\Embeddable\web-player.html" />
+    <None Include="Templates\Embeddable\web-player.js" />
+  </ItemGroup>
   <ItemDefinitionGroup Condition="'$(Configuration)|$(Platform)'=='Debug|Emscripten'">
     <Link>
       <PreloadFile>$(ProjectDir)\resources@/resources;$(ProjectDir)\example@/example</PreloadFile>
-      <AdditionalOptions>-s USE_ZLIB=1 -s USE_LIBPNG=1 -s USE_OGG=1 -s USE_VORBIS=1 -s ERROR_ON_UNDEFINED_SYMBOLS=0 -s FULL_ES3=1 -s USE_GLFW=3 -s MIN_WEBGL_VERSION=2 -s MAX_WEBGL_VERSION=2 -s USE_SDL=2 %(AdditionalOptions)</AdditionalOptions>
+      <AdditionalOptions>-s USE_ZLIB=1 -s USE_LIBPNG=1 -s USE_OGG=1 -s USE_VORBIS=1 -s ERROR_ON_UNDEFINED_SYMBOLS=0 -s FULL_ES3=1 -s USE_GLFW=3 -s MIN_WEBGL_VERSION=2 -s MAX_WEBGL_VERSION=2 -s USE_SDL=2 -s MODULARIZE=1 %(AdditionalOptions)</AdditionalOptions>
       <AdditionalLinkDirectories>$(LibraryPath);%(AdditionalLinkDirectories)</AdditionalLinkDirectories>
       <AdditionalDependencies>Siv3D;opencv_objdetect;opencv_photo;opencv_imgproc;opencv_core;harfbuzz;freetype;turbojpeg;gif;webp;opusfile;opus;tiff;</AdditionalDependencies>
       <EchoCommandLines>false</EchoCommandLines>
       <JsLibrary>$(SIV3D_0_6_0_WEB)\lib\Siv3D.js;</JsLibrary>
+      <PostJsFile>$(ProjectDir)\Templates\Embeddable\web-player.js</PostJsFile>
+      <HtmlShellFile>$(ProjectDir)\Templates\Embeddable\web-player.html</HtmlShellFile>
       <EnableMemoryGrowth>true</EnableMemoryGrowth>
       <EmRun>true</EmRun>
+      <IncludedAssetTargets></IncludedAssetTargets>
     </Link>
     <ClCompile>
       <AdditionalIncludeDirectories>$(IncludePath);</AdditionalIncludeDirectories>
@@ -277,14 +284,17 @@
       <AdditionalOptions>-D_XM_NO_INTRINSICS_</AdditionalOptions>
     </ClCompile>
     <Link>
-      <AdditionalOptions>-s USE_ZLIB=1 -s USE_LIBPNG=1 -s USE_OGG=1 -s USE_VORBIS=1 -s ERROR_ON_UNDEFINED_SYMBOLS=0 -s FULL_ES3=1 -s USE_GLFW=3 -s MIN_WEBGL_VERSION=2 -s MAX_WEBGL_VERSION=2 -s USE_SDL=2 %(AdditionalOptions)</AdditionalOptions>
+      <AdditionalOptions>-s USE_ZLIB=1 -s USE_LIBPNG=1 -s USE_OGG=1 -s USE_VORBIS=1 -s ERROR_ON_UNDEFINED_SYMBOLS=0 -s FULL_ES3=1 -s USE_GLFW=3 -s MIN_WEBGL_VERSION=2 -s MAX_WEBGL_VERSION=2 -s USE_SDL=2 -s MODULARIZE=1 %(AdditionalOptions)</AdditionalOptions>
       <AdditionalDependencies>Siv3D;opencv_objdetect;opencv_photo;opencv_imgproc;opencv_core;harfbuzz;freetype;turbojpeg;gif;webp;opusfile;opus;tiff;</AdditionalDependencies>
       <PreloadFile>$(ProjectDir)\resources@/resources;$(ProjectDir)\example@/example</PreloadFile>
       <JsLibrary>$(SIV3D_0_6_0_WEB)\lib\Siv3D.js;</JsLibrary>
+      <PostJsFile>$(ProjectDir)\Templates\Embeddable\web-player.js</PostJsFile>
+      <HtmlShellFile>$(ProjectDir)\Templates\Embeddable\web-player.html</HtmlShellFile>
       <AdditionalLinkDirectories>$(LibraryPath);%(AdditionalLinkDirectories)</AdditionalLinkDirectories>
       <EchoCommandLines>false</EchoCommandLines>
       <EnableMemoryGrowth>true</EnableMemoryGrowth>
       <EmRun>true</EmRun>
+      <IncludedAssetTargets></IncludedAssetTargets>
     </Link>
   </ItemDefinitionGroup>
   <Import Project="$(VCTargetsPath)\Microsoft.Cpp.targets" />
diff --git a/Web/VisualStudioTemplate/OpenSiv3D(0.6.0)Web/Siv3DTest.vcxproj.filters b/Web/VisualStudioTemplate/OpenSiv3D(0.6.0)Web/Siv3DTest.vcxproj.filters
index e8f490fc0..9b57eaedc 100644
--- a/Web/VisualStudioTemplate/OpenSiv3D(0.6.0)Web/Siv3DTest.vcxproj.filters
+++ b/Web/VisualStudioTemplate/OpenSiv3D(0.6.0)Web/Siv3DTest.vcxproj.filters
@@ -121,6 +121,12 @@
     <Filter Include="Resource Files\resources\engine\texture\box-shadow">
       <UniqueIdentifier>{aeb4dbf4-f1ba-402b-9249-c3056a02598d}</UniqueIdentifier>
     </Filter>
+    <Filter Include="Template Files">
+      <UniqueIdentifier>{3DC55764-A3B8-4D7E-AA91-C3C467637996}</UniqueIdentifier>
+    </Filter>
+    <Filter Include="Template Files\Embeddable">
+      <UniqueIdentifier>{1155355D-3484-407F-BCE3-BC5EB094E4DD}</UniqueIdentifier>
+    </Filter>
   </ItemGroup>
   <ItemGroup>
     <Content Include="example\csv\config.csv">
@@ -606,6 +612,14 @@
       <Filter>Resource Files\example</Filter>
     </Media>
   </ItemGroup>
+  <ItemGroup>
+    <None Include="Templates\Embeddable\web-player.html">
+      <Filter>Template Files\Embeddable</Filter>
+    </None>
+    <None Include="Templates\Embeddable\web-player.js">
+      <Filter>Template Files\Embeddable</Filter>
+    </None>
+  </ItemGroup>
   <ItemGroup>
     <ClCompile Include="Main.cpp">
       <Filter>Source Files</Filter>
diff --git a/Web/VisualStudioTemplate/OpenSiv3D(0.6.0)Web/Templates/Embeddable/web-player.html b/Web/VisualStudioTemplate/OpenSiv3D(0.6.0)Web/Templates/Embeddable/web-player.html
new file mode 100644
index 000000000..99272a403
--- /dev/null
+++ b/Web/VisualStudioTemplate/OpenSiv3D(0.6.0)Web/Templates/Embeddable/web-player.html
@@ -0,0 +1,337 @@
+<!DOCTYPE html>
+<html lang="en-us">
+  <head>
+    <meta charset="utf-8" />
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+    <meta name="viewport" content="user-scalable=no" />
+    <link rel="manifest" href="manifest.json" />
+    <title>OpenSiv3D for Web</title>
+    <style>
+      body {
+        font-family: arial;
+        overflow: hidden;
+        margin: 0px;
+        padding: 0px;
+      }
+
+      #app {
+        position: relative;
+        height: 100vh;
+        width: 100vw;
+        background-color: gray;
+      }
+
+      #app-container {
+        display: flex;
+        flex-flow: column;
+        width: 100%;
+        height: 100%;
+      }
+
+      #canvas-container {
+        flex: auto;
+      }
+
+      /* the canvas *must not* have any border or padding, or mouse coords will be wrong */
+      canvas.emscripten {
+        position: absolute;
+        border: 0px none;
+        background-color: gray;
+      }
+
+      #progress-frame {
+        position: absolute;
+        z-index: 10;
+        left: 0px; top: 0px; right: 0px;
+        border: 1px solid rgb(120, 120, 120);
+        background-color: rgb(60, 60, 60);
+      }
+
+      #progress {
+        height: 10px;
+      }
+
+      .progress-ok {
+        background-color: rgb(189, 215, 46);
+      }
+
+      div.progress-error {
+        background-color: rgb(215, 66, 46);
+      }
+
+      #footer-control {
+        z-index: 15;
+        flex: 0 1.2cm;
+        background-color: rgb(60, 60, 60);
+    
+        display: flex;
+        justify-content: flex-end; 
+        align-items: center;
+      }
+
+      .footer-button {
+        width: 1cm;
+        height: 1cm;
+      }
+
+      .footer-button::after {
+        width: 0.3cm;
+        height: 1cm;
+      }
+
+      .st0 {
+        fill:#CBCBCB;
+      }
+
+      .st0:hover {
+        fill:#FBFBFB;
+      }
+
+      .st1 {
+        fill:#CBCBCB;
+        transition: all 0.2s ease-out;
+      }
+
+      .st1:hover {
+        fill:#FBFBFB;
+      }
+
+      .playground-overlay {
+        position: absolute;
+        left: 0px;
+        top: 0px;
+        width: 100%;
+        height: 100%;
+
+        color: transparent;
+        transition: all 0.2s ease-out;
+      }
+
+      .playground-overlay:hover {
+        color: white;
+        border-color: white;
+        background: rgba(0, 0, 0, 0.5);
+      }
+
+      .play-button {
+        width: 3cm;
+        height: 3cm;
+
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translateY(-50%) translateX(-50%);
+      }
+    </style>
+  </head>
+  <body>
+    <div id="app">
+      <div class="playground-overlay" hidden="true">
+        <span class="play-button">
+          <svg version="1.1" id="_x32_" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+              viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
+            <g>
+              <path class="st1" d="M256,0C114.625,0,0,114.625,0,256c0,141.374,114.625,256,256,256c141.374,0,256-114.626,256-256
+                C512,114.625,397.374,0,256,0z M351.062,258.898l-144,85.945c-1.031,0.626-2.344,0.657-3.406,0.031
+                c-1.031-0.594-1.687-1.702-1.687-2.937v-85.946v-85.946c0-1.218,0.656-2.343,1.687-2.938c1.062-0.609,2.375-0.578,3.406,0.031
+                l144,85.962c1.031,0.586,1.641,1.718,1.641,2.89C352.703,257.187,352.094,258.297,351.062,258.898z"/>
+            </g>
+          </svg>
+        </span>
+      </div>
+      <div id="progress-frame">
+        <div id="progress" class="progress-ok" hidden></div>
+      </div>
+      <div id="app-container">
+        <div id="canvas-container">
+          <canvas
+            class="emscripten"
+            id="canvas"
+            oncontextmenu="event.preventDefault()"
+            tabindex="-1"
+            hidden="true"
+          ></canvas>
+        </div>
+        <div id="footer-control">
+          <a class="footer-button st0" href="javascript:void(0);" onclick="Options.toggleAudioContext()">
+            <svg id="sound-off" version="1.1" id="_x32_" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+              viewBox="0 0 512 512" style="enable-background:new 0 0 512 512; display: none;" xml:space="preserve">
+              <g class="st0">
+                <path d="M0,204.883V307.12c0,21.22,17.212,38.437,38.442,38.437h71.582V166.446H38.442
+                  C17.212,166.446,0,183.653,0,204.883z"/>
+                <path d="M288.033,94.716c-3.872-2.382-8.696-2.568-12.744-0.517l-142.237,72.246v179.112l142.237,72.246
+                  c4.048,2.051,8.872,1.856,12.744-0.517c3.872-2.373,6.226-6.582,6.226-11.123V105.839
+                  C294.259,101.298,291.905,97.089,288.033,94.716z"/>
+                <path d="M453.117,253.467l54.386-54.394c5.996-5.996,5.996-15.713,0-21.709c-5.996-5.996-15.713-5.996-21.709,0
+                  l-54.386,54.385l-54.394-54.385c-5.997-5.996-15.713-5.996-21.709,0c-5.997,5.996-5.997,15.713,0,21.709l54.384,54.394
+                  l-54.384,54.385c-5.997,5.996-5.997,15.713,0,21.709c5.996,5.996,15.712,5.996,21.709,0l54.394-54.386l54.386,54.386
+                  c5.996,5.996,15.713,5.996,21.709,0c5.996-5.996,5.996-15.713,0-21.709L453.117,253.467z"/>
+              </g>
+            </svg>
+            <svg id="sound-on" version="1.1" id="_x32_" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+              viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
+              <g>
+                <path d="M0,206.254v99.491c0,20.663,16.752,37.418,37.414,37.418h69.667V168.844H37.414
+                  C16.752,168.844,0,185.591,0,206.254z"/>
+                <path d="M280.326,99.026c-3.768-2.31-8.464-2.5-12.403-0.494l-138.431,70.313v174.319l138.431,70.313
+                  c3.94,1.996,8.635,1.806,12.403-0.503c3.764-2.31,6.059-6.416,6.059-10.826V109.86C286.386,105.441,284.09,101.335,280.326,99.026z
+                  "/>
+                <path d="M408.522,162.666c-5.066-5.626-13.725-6.073-19.346-1.007c-5.618,5.057-6.068,13.715-1.007,19.341
+                  c19.15,21.252,28.713,48.074,28.718,75c-0.005,26.936-9.567,53.756-28.713,74.998c-5.066,5.618-4.615,14.285,1.002,19.351
+                  c5.617,5.056,14.28,4.61,19.341-1.007c23.842-26.451,35.775-59.944,35.765-93.342C444.291,222.61,432.358,189.107,408.522,162.666z
+                  "/>
+                <path d="M458.88,117.33c-5.061-5.617-13.72-6.064-19.342-0.998c-5.622,5.056-6.073,13.715-1.007,19.341
+                  c30.722,34.092,46.068,77.156,46.077,120.326c-0.01,43.168-15.355,86.232-46.077,120.334c-5.066,5.618-4.614,14.276,1.007,19.342
+                  c5.622,5.066,14.28,4.62,19.346-1.008C494.289,355.367,512.01,305.631,512,256C512.01,206.368,494.289,156.631,458.88,117.33z"/>
+                <path d="M338.764,207.032c-5.622,5.057-6.073,13.725-1.007,19.342c7.594,8.43,11.362,18.98,11.371,29.626
+                  c-0.009,10.644-3.777,21.194-11.371,29.634c-5.066,5.618-4.614,14.276,1.007,19.341c5.622,5.066,14.28,4.609,19.341-1.007
+                  c12.261-13.601,18.43-30.832,18.415-47.968c0.015-17.137-6.154-34.359-18.415-47.96
+                  C353.044,202.414,344.382,201.967,338.764,207.032z"/>
+              </g>
+            </svg>
+          </a>
+          <a class="footer-button" href="javascript:void(0);" onclick="Options.requestFullscreen(false, false)">
+            <svg width="1cm" height="1cm" viewBox="0 0 100 100"
+                xmlns="http://www.w3.org/2000/svg" version="1.1">
+              
+              <rect x="10" y="20" width="80" height="60"
+                    fill="none" stroke="white" stroke-width="5"/>
+            </svg>
+          </a>
+        </div>
+      </div>
+    </div>
+    <script>
+      const progressElement = document.querySelector("#progress");
+      const canvasContainerElement = document.querySelector("#canvas-container");
+      const soundOnIcon = document.querySelector('#sound-on');
+      const soundOffIcon = document.querySelector('#sound-off');
+      let gainNode;
+
+      const onResize = function() {
+        Options["setCanvasSize"](canvasContainerElement.clientWidth, canvasContainerElement.clientHeight);
+      }
+
+      const onAudioInit = function() {
+        // Inject Gain Node
+
+        /** @type { AudioContext } */
+        const audioCtx = Options["getCurrentAudioContext"]();
+        /** @type { ScriptProcessorNode } */
+        const audioSource = Options["getCurrentAudioSource"]();
+
+        gainNode = audioCtx.createGain();
+        audioSource.disconnect(audioCtx.destination);
+        audioSource.connect(gainNode);
+        gainNode.connect(audioCtx.destination);
+      }
+
+      let runtimeReady = false;
+      let hasRaiseRuntimeError = false;
+
+      const onRuntimeError = function() {
+        progressElement.classList.add('progress-error');
+        progressElement.style.width = '100%';
+        progressElement.hidden = false;
+
+        hasRaiseRuntimeError = true;
+      }
+
+      var Options = {
+        preRun: [],
+        postRun: [ onResize, onAudioInit ],
+        printErr: function (text) {
+          if (runtimeReady) {
+            onRuntimeError();
+          }
+        },
+        canvas: (function () {
+          var canvas = document.getElementById("canvas");
+
+          // As a default initial behavior, pop up an alert when webgl context is lost. To make your
+          // application robust, you may want to override this behavior before shipping!
+          // See http://www.khronos.org/registry/webgl/specs/latest/1.0/#5.15.2
+          canvas.addEventListener(
+            "webglcontextlost",
+            function (e) {
+                alert("WebGL context lost. You will need to reload the page.");
+                onRuntimeError();
+                e.preventDefault();
+            },
+          false
+          );
+
+          return canvas;
+        })(),
+        setStatus: function (text) {
+          if (!Options["setStatus"].last)
+          Options["setStatus"].last = { time: Date.now(), text: "" };
+          if (text === Options["setStatus"].last.text) return;
+          var m = text.match(/([^(]+)\((\d+(\.\d+)?)\/(\d+)\)/);
+          var now = Date.now();
+          if (m && now - Options["setStatus"].last.time < 30) return; // if this is a progress update, skip it if too soon
+          Options["setStatus"].last.time = now;
+          Options["setStatus"].last.text = text;
+          if (m) {
+            text = m[1];
+            progressElement.style.width = `${parseInt(m[2]) * 100 / parseInt(m[4])}%`;
+            progressElement.hidden = false;   
+          } else if (!hasRaiseRuntimeError) { 
+            progressElement.hidden = true;
+          }
+        },
+        totalDependencies: 0,
+        monitorRunDependencies: function (left) {
+          this.totalDependencies = Math.max(this.totalDependencies, left);
+          Options["setStatus"](
+          left
+              ? "Preparing... (" +
+                  (this.totalDependencies - left) +
+                  "/" +
+                  this.totalDependencies +
+                  ")"
+              : "All downloads complete."
+          );
+        },
+        onRuntimeInitialized: function() {
+          runtimeReady = true;
+          window.addEventListener("resize", onResize);
+        },
+        toggleAudioContext: function() {
+          if (gainNode.gain.value == 1.0) {
+            gainNode.gain.value = 0.0;
+
+            soundOnIcon.style.display = "none";
+            soundOffIcon.style.display = "inline";
+          } else {
+            gainNode.gain.value = 1.0;     
+
+            soundOnIcon.style.display = "inline";
+            soundOffIcon.style.display = "none";
+          }
+        }
+      }
+      Options["setStatus"]("Downloading...");
+    </script>
+    {{{ SCRIPT }}}
+    <script>
+      if (window != window.parent) {
+        var overlay = document.querySelector(".playground-overlay");
+        overlay.hidden = false;
+
+        overlay.addEventListener("click", function onClick() {
+          overlay.removeEventListener("click", onClick);
+          overlay.hidden = true;
+
+          Options.canvas.hidden = false;
+          Module(Options);
+        });
+      } else {
+        document.querySelector("script[async]").addEventListener('load', function() {
+          Options.canvas.hidden = false;
+          Module(Options);
+        });
+      }
+    </script>
+  </body>
+</html>
diff --git a/Web/VisualStudioTemplate/OpenSiv3D(0.6.0)Web/Templates/Embeddable/web-player.js b/Web/VisualStudioTemplate/OpenSiv3D(0.6.0)Web/Templates/Embeddable/web-player.js
new file mode 100644
index 000000000..be689bf2f
--- /dev/null
+++ b/Web/VisualStudioTemplate/OpenSiv3D(0.6.0)Web/Templates/Embeddable/web-player.js
@@ -0,0 +1,7 @@
+Module["getCurrentAudioContext"] = function() {
+    return Module["SDL2"].audioContext;
+}
+
+Module["getCurrentAudioSource"] = function() {
+    return Module["SDL2"].audio.scriptProcessorNode;
+}