html5-audio 相关问题

audio元素用于将声音内容嵌入HTML或XHTML文档中。音频元素是HTML5的一部分。

Flutter 中不支持 HTML 音频 ||文本可以正常工作，其他标签可以正常工作，但音频无法播放

此数据来自 json 格式的 API，值来自 html 标签。 Flutter 不是 Sported Html 音频标签，所以请建议我一些东西来存档它。 “消息”：“

html json flutter response html5-audio

回答 0 投票 0

如何用 CSS/Javascript 中的圣诞歌曲暂停闪烁的圣诞灯？

我正在制作一个 CSS 动画，其中圣诞树上有闪烁的灯光，随着圣诞歌曲的节拍，当我按下树下方的按钮暂停歌曲时，灯光也会闪烁...

javascript html css html5-audio web-audio-api

回答 2 投票 0

应用CSS缩放时如何更改HTML5音频播放器的下拉位置？

此问题发生在 Chrome、Brave 甚至 Internet Explorer/Edge 中：当点击三个点打开下拉菜单时，下拉菜单距离音频播放器很远：使用 Webdeveloper 我无法...

html css html5-audio

回答 1 投票 0

如何在html中“包含”声音（例如wav文件）？

我想在 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>

html5-audio

回答 1 投票 0

在 Safari 中通过 Blob URL 加载音频失败

以下代码适用于 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>

safari blob html5-audio

回答 0 投票 0

如何通过html5播放.spx文件？

从html5规范来看，似乎支持spx： http://dev.w3.org/html5/spec-preview/the-source-element.html 使用：但根据我的尝试，它无法在 Firefox 17 和 Chrome 中播放，你能帮忙吗？

javascript html html5-audio speex

回答 2 投票 0

音频/媒体资源请求永远挂起

我在播放音频元素时遇到问题。当我垃圾邮件点击它们（不仅如此）一段时间后，请求开始永远挂起，并且所有请求也都在它们之后。我的音频元素...

javascript html html5-audio

回答 1 投票 0

html 音频标签在 Chrome 中不显示，但在控制台的元素中可见并且在 Firefox 中工作，为什么？

我有这个反应组件：从“@kpt/ui/providers/i18n/translateService”导入翻译；从“@mui/material”导入{盒子，版式}；从 &q... 导入 { IContentProps }

reactjs google-chrome html5-audio display

回答 1 投票 0

使用音频元素做出反应并确保显示持续时间

这个音频标签定义如下：其中 src 是音频链接的某个 url。在播放音频之前，播放器看起来像这样：...

reactjs html5-audio

回答 1 投票 0

如何在网站上播放通知声音？

当某个事件发生时，我希望我的网站向用户播放简短的通知声音。打开网站时声音不应自动启动（立即）。相反，它应该在

javascript html audio notifications html5-audio

回答 11 投票 0

如何使用javascript请求音频自动播放权限

我想请求用户许可（例如 google meet 中的麦克风许可）来自动播放 rickroll 的音频文件。我希望在用户使用后播放 javascript 函数

javascript html5-audio

回答 1 投票 0

Html 音频标签正在播放 29 秒

我在我的网站中使用了音频标签 ```` 我在我的网站中使用了音频标签 ```<source type="audio/mpeg" src="https://audio-ssl.itunes.apple.com/itunes-assets/AudioPreview71/v4/09/41/b7/0941b772-bfd0-db29-6832-411b30086c7e/mzaf_3353501170920741567.plus.aac.p.m4a"></source> </audio>``` 无论歌曲长度如何，它总是播放并显示 29 秒。可能是什么问题！？我使用了音频标签，当我使用外部 mp3 链接作为源时，它只播放 29 秒，就像限制只有 29 秒一样。我该如何解决这个问题或者可能是什么问题！？ iTunes 预览歌曲长度为 29 秒。尝试使用其他 mp3 源 https://freetestdata.com/wp-content/uploads/2021/09/Free_Test_Data_2MB_MP3.mp3

html html5-audio

回答 1 投票 0

Chrome 上的 JavaScript 音频无法正常工作

我正在制作一个网页，每次加载网页时都会播放随机声音，并且 JS 中的音频元素存在问题。我无法让浏览器播放声音，我不知道该怎么办。我...

javascript html5-audio

回答 1 投票 0

HTML5 将音频录制到文件

我最终想做的是从用户的麦克风进行录音，并在完成后将文件上传到服务器。到目前为止，我已经成功使用以下代码创建了一个到元素的流：...

javascript html html5-audio audio-recording

回答 9 投票 0

徽标、图像和 mp3 未在我的 github 网站中加载（使用 Visual Studio 代码制作）

对于我的全栈程序，我需要制作三个html页面并将它们上传到Github并使其成为一个在线网站。除了徽标、图像和 mp3 文件音频之外，一切正常。我