audio元素用于将声音内容嵌入HTML或XHTML文档中。音频元素是HTML5的一部分。
Angular / HTML5 不会播放本地文件夹中的音频 mpeg
Angular 或 HTML5 是否会以某种方式限制从本地文件夹/本地主机播放 mpeg 文件？如果我使用外部 CDN 的链接，它就会起作用。 在 HTML5 中，我有 . 。 。 。 Angular 或 HTML5 是否会以某种方式限制 mpeg 文件从本地文件夹/localhost 播放？如果我使用外部 CDN 的链接，它就可以工作。 在 HTML5 中，我有 . 。 。 . <audio controls autoplay> <source src="src/app/sounds/alert.mp3" type="audio/mpeg" > </audio> 播放器像这样变灰： 我也尝试过以编程方式播放该文件，但没有成功。 。 . var audio = new Audio("src/app/sounds/alert.mp3"); audio.load() audio.play(); 有什么建议吗？谢谢！ 首先将文件存储在 Angular 的 assets 文件夹中，将文件位置添加到 angular.json 的 asset 数组中（如果需要，可能是在构建过程中！）然后您可以像下面一样引用该文件！ <audio controls autoplay> <source src="/assets/asdf.mp3" type="audio/mpeg" /> </audio> Stackblitz Demo -> cd test -> npm i -> npm run start
我想根据用户的滚动位置调整自动播放、循环播放的 mp3 曲目的音量。然而，我没有看到任何方法来调整曲目播放的音量。有没有办法使用...
我正在制作一个钢琴应用程序。我在 React 组件中有一个 js 函数，可以根据提供的注释播放相应的文件，但控制台总是抛出此错误： 未捕获（承诺）DOMExcepti...
我有一个网站，上面放了我的视频/音频。 我使用 HTML5 和标签来显示视频。 但如果客户端打开查看源页面，然后复制文件地址，就可以下载视频/音频。 怎么...
使用 HTML <audio> 标签与谷歌驱动器给出 403 Forbidden
在 Google Drive 中使用 HTML 标签会出现 403 Forbidden 在 Google Drive 中使用 HTML 标签会出现 403 Forbidden <audio controls="controls"> <source src="https://docs.google.com/uc?export=download&id=<ABCD>"> </audio> 执行这段代码时，会抛出 403 Forbidden 错误 这些年来，当我在我的网站上使用它们时，它一直有效......但突然发现，由于这个错误，网站上的音频文件似乎都不起作用 通过在 Google API 控制台中创建项目并为 API 密钥创建凭据来启用 Google Drive API.. 在音频标签中更改了 URL 模式，如下 <audio controls="controls"> <source src="https://www.googleapis.com/drive/v3/files/{FILE_ID}?alt=media&key={API_KEY}" type="audio/mp3"> </audio> 这不再给出 403 Forbidden 错误并按预期工作
在下面的音频跳转演示中，1MnxnMOPlkOJO.mp3可以正常点击，然后在请求中传递正确的范围开始并立即播放。 1MnxnMOPlkOJO.aac 没有，它会继续
我正在 vuejs 中开发音频播放器，但我正在努力解决如何让类星体滑块组件在音乐播放时随着时间的推移而不断滴答作响，以及如何在用户单击暂停时停止它......
使用 HTML/Javascript 中的一个按钮随机化音频文件数组，以停止上一曲目并开始新曲目
我有一组 3-5 秒的音频文件，我想通过单击按钮对其进行随机化。 const audioArray = ["sound1.mp3", "sound2.mp3", "sound3.mp3"]; 功能
给定 <audio> 元素源通过 HTTP 进行流式传输会导致延迟（缓冲）？
我在 FastAPI 中有一个简单的 API 流生成器，由于整个数据的处理成本高昂，它可以动态传输音频块（即 wav）。但是，音频不会立即开始，除非......
有谁知道如何使文本到音频 API 也适用于 IOS。 它在 Android 和 Windows 上运行良好，但不适用于 IOS/Mac。 const playAudio = async () => { if (props.currentA !== ...
我已经在我的Reactjs应用程序中实现了HTML5通知API，它在我的桌面上运行良好，通知即将到来。但是当我用手机打开网站时，通知是...
HTMLAudioElement 专门拦截所有键盘事件 - 如何覆盖？
我有一个非常简单的带有音频标签的媒体播放器网页。有必要为用户提供键盘快捷键，无论是什么元素，这些快捷键都可以在整个页面中一致地工作
我已经成功制作了一个 html 页面，在其中我可以创建与各个按钮关联的不同音频文件的音板。每个按钮都会播放一个音频文件，当您单击不同的...
Flutter 中不支持 HTML 音频 ||文本可以正常工作，其他标签可以正常工作，但音频无法播放
此数据来自 json 格式的 API，值来自 html 标签。 Flutter 不是 Sported Html 音频标签，所以请建议我一些东西来存档它。 “消息”：“
如何用 CSS/Javascript 中的圣诞歌曲暂停闪烁的圣诞灯？
我正在制作一个 CSS 动画，其中圣诞树上有闪烁的灯光，随着圣诞歌曲的节拍，当我按下树下方的按钮暂停歌曲时，灯光也会闪烁...
此问题发生在 Chrome、Brave 甚至 Internet Explorer/Edge 中： 当点击三个点打开下拉菜单时，下拉菜单距离音频播放器很远： 使用 Webdeveloper 我无法...
我想在 html 中包含 .wav 文件的 base64 版本。 静止无功发生器 我有一个名为 circ.svg 的 .svg 文件： 我想在 html 中包含 .wav 文件的 base64 版本。 SVG 我有一个名为 circ.svg 的 .svg 文件： <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="792" height="612"> <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow"></circle></svg> 我可以将其嵌入到我的 html 文件中： <html><body><embed src="circ.svg"></embed></body></html> I can include it in my html file: <html><body><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="792" height="612"> <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow"></circle></svg></body></html> PNG 我还有一个名为 htmlimg.png 的 .png 文件。我可以将它嵌入到我的 html 文件中： <html><body><embed src="htmlimg.png"></embed></body></html> I can convert it to based 64 and include the base64 version in my html file: <html><body><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAO0AAABuC ... deleted stuff ... ASUVORK5CYII=" alt="Base64 encoded image" width="150" height="150"/></body></html> WAV 我还有一个名为 Auld_Lang_Syne_-_U.S._Navy_Band.wav 的 .wav 文件。我可以将它嵌入到我的 html 文件中： <html><body><audio controls><source src="Auld_Lang_Syne_-_U.S._Navy_Band.wav" type="audio/wav"></audio></body></html> 我可以将其转换为base64。我可以在html中包含base64版本吗？ 约翰 您可以像其他任何文件一样嵌入音频文件，例如 .wav，但您可能不应该这样做。 与图像文件（文件大小已经相当“重”）相比，媒体文件（音频和视频）相当大。 将大文件嵌入为 base64 编码的 dataURL 会显着增大页面的文档大小，从而影响加载时间。 更重要的是，dataURL 在大多数浏览器中都有“长度限制”（尽管自去年以来已经相当宽容）。因此，在处理较大的文件时，您应该选择外部文件引用。它们还提供更好的缓存和异步加载。 另请记住，.wav 是一种未压缩的音频格式 - 它需要比 ogg、mp3 或 aac 等压缩格式多约 5-10 倍的字节。 这里有一个嵌入小型 (~36KB) mp3 的示例 - 它已经超出了 SO 片段限制。它还使您的代码变得非常难看，因为您必须滚动这个巨大的 base64 块 =) /** * fetch external mp3 and * convert it to base64 encoded dataURL */ (async()=>{ let src = sampleAudio.src; let fetched = await fetch(src); let blob = await fetched.blob() let dataURL = await blobToBase64(blob); audiBase64.src=dataURL; textBase64.value=dataURL; })() /** * fetched blob to base64 */ function blobToBase64(blob) { return new Promise((resolve) => { const reader = new FileReader(); reader.onloadend = () => resolve(reader.result); reader.readAsDataURL(blob); }); } textarea{ width:100%; min-height:10em; } <h1>Audio example</h1> <p><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/audio">See mdn docs</a></p> <h2>External mp3</h2> <audio id="sampleAudio" src="https://interactive-examples.mdn.mozilla.net/media/cc0-audio/t-rex-roar.mp3" controls></audio> <h2>DataURL mp3 (base64 encoded)</h2> <audio id="audiBase64" src="" controls></audio> <textarea id="textBase64" cols="30" rows="10"></textarea>
以下代码适用于 Chrome (22.0)，但不适用于 Safari (6.0) 函数 onGo(e) { var fr = new FileReader(); var 文件 = 文档。</desc> <question vote="19"> <p>以下代码适用于 Chrome (22.0)，但不适用于 Safari (6.0)</p> <pre><code><!DOCTYPE html> <html> <head> <script> function onGo(e) { var fr = new FileReader(); var file = document.getElementById("file").files[0]; fr.onload = function(e) { var data = new Uint8Array(e.target.result); var blob = new Blob([data], {type: 'audio/mpeg'}); var audio = document.createElement('audio'); audio.addEventListener('loadeddata', function(e) { audio.play(); }, false); audio.addEventListener('error', function(e) { console.log('error!', e); }, false); audio.src = webkitURL.createObjectURL(blob); }; fr.readAsArrayBuffer(file); } </script> </head> <body> <input type="file" id="file" name="file" /> <input type="submit" id="go" onclick="onGo()" value="Go" /> </body> </html> </code></pre> <p>在 Safari 中，不会调用任何回调（loadeddata 或 error）。 使用的内容是mp3文件，通常使用音频标签进行播放。 Safari 需要什么特别照顾吗？</p> </question> <answer tick="false" vote="17"> <p>很多年后，我相信OP中的例子应该可以正常工作。只要您在创建 blob 时以某种方式设置 mime 类型，就像上面的 OP 使用传入选项的 type 属性所做的那样：</p> <pre><code>new Blob([data], {type: 'audio/mpeg'}); </code></pre> <p>您还可以在音频元素内部使用 <pre><code><source></code></pre> 元素，并设置 <pre><code>type</code></pre> 元素的 <pre><code><source></code></pre> 属性。我这里有一个例子：</p> <p><a href="https://lastmjs.github.io/safari-object-url-test" rel="noreferrer">https://lastmjs.github.io/safari-object-url-test</a></p> <p>这是代码：</p> <pre><code>const response = await window.fetch('https://upload.wikimedia.org/wikipedia/commons/transcoded/a/ab/Alexander_Graham_Bell%27s_Voice.ogg/Alexander_Graham_Bell%27s_Voice.ogg.mp3'); const audioArrayBuffer = await response.arrayBuffer(); const audioBlob = new Blob([audioArrayBuffer]); const audioObjectURL = window.URL.createObjectURL(audioBlob); const audioElement = document.createElement('audio'); audioElement.setAttribute('controls', true); document.body.appendChild(audioElement); const sourceElement = document.createElement('source'); audioElement.appendChild(sourceElement); sourceElement.src = audioObjectURL; sourceElement.type = 'audio/mp3'; </code></pre> <p>我更喜欢在创建 blob 时设置它的 mime 类型。 <pre><code><source></code></pre> 元素 <pre><code>src</code></pre> 属性/属性无法动态更新。</p> </answer> <answer tick="false" vote="5"> <p>我有同样的问题，我已经花了几天时间来解决这个问题。 正如 <strong>pwray</strong> 在另一篇文章中提到的，Safari 需要媒体请求的文件扩展名：</p> <p><a href="https://stackoverflow.com/questions/4201576/html5-audio-files-fail-to-load-in-safari#">HTML5 音频文件无法在 Safari 中加载</a></p> <p>我尝试将我的 blob 保存到一个文件中，将其命名为 file.mp3，Safari 能够以这种方式加载音频，但在我将文件重命名为没有扩展名（只是“文件”）后，它无法加载。 当我在 Safari 的另一个选项卡中尝试从 blob 创建的 url 时：</p> <pre><code>url = webkitURL.createObjectURL(blob); </code></pre> <p>它立即下载一个名为“未知”的文件，但是当我在 Chrome（也在 Mac 上）中尝试相同的操作时，它在浏览器中显示了该文件的内容（mp3 文件以 ID3 开头，然后是一堆非可读字符）。 我还不知道如何强制由 blob 组成的 url 具有扩展名，因为通常它看起来像这样：</p> <pre><code>blob:https://example.com/a7e38943-559c-43ea-b6dd-6820b70ca1e2 </code></pre> <p>所以它的结尾看起来像一个会话变量。</p> <p>这就是我陷入困境的地方，我真的很希望看到这里一些聪明人的解决方案。 谢谢， 史蒂文</p> </answer> <answer tick="false" vote="0"> <p>有时，HTML5 音频可能会在没有任何明显原因的情况下停止加载。 如果您查看媒体事件 (<a href="http://www.w3schools.com/tags/ref_eventattributes.asp" rel="nofollow">http://www.w3schools.com/tags/ref_eventattributes.asp</a>)，您将看到一个名为：“<strong>onStalled</strong>”的事件，定义是“要运行的脚本”当浏览器因某种原因无法获取媒体数据时”，看起来它应该对您有帮助。</p> <p>尝试监听该事件并在必要时重新加载文件，如下所示：</p> <pre><code>audio.addEventListener('onstalled', function(e) { audio.load(); }, false); </code></pre> <p>希望对你有帮助！</p> </answer> <answer tick="false" vote="0"> <p>只需在音频中使用源标签即可。</p> <pre><code><audio controls> <source src="blob" type="blobType"> </audio> </code></pre> </answer> <answer tick="false" vote="0"> <p>这对我有用，Safari 和 chrome。</p> <pre><code> function getBlob(url: string): Promise<Blob> { return new Promise((resolve, reject) => { const xhr = new XMLHttpRequest(); xhr.responseType = 'blob'; xhr.overrideMimeType('audio/mp3'); xhr.onload = (event) => { var blob = xhr.response; resolve(blob); }; xhr.onerror = (event) => { reject(event); }; xhr.open('GET', url); xhr.send(); }); } </code></pre> <p>函数获取blob，safari的技巧是覆盖请求中的文件类型，xhr.overrideMimeType('audio/mp3');</p> <p>然后将其与您要播放的 URL 音频以异步方式调用</p> <pre><code>const blob = await this.getBlob(url); const source = URL.createObjectURL(blob); const audio = new Audio(source); audio.load(); audio.play(); </code></pre> </answer> </body></html>
从html5规范来看，似乎支持spx： http://dev.w3.org/html5/spec-preview/the-source-element.html 使用： 但根据我的尝试，它无法在 Firefox 17 和 Chrome 中播放，你能帮忙吗？