流形mani 2023-12-09 19:03 采纳率: 0%
浏览 5

浏览器页面中存在动态添加的音频文件，点击播放却显示都播放的始终是第一个文件路径怎么处理

浏览器页面中存在动态添加的音频文件，点击播放却显示都播放的始终是第一个文件路径怎么处理？
打印的路径都是对的
但播放出来就是不对

  • 写回答

2条回答 默认 最新

  • ChatGPTᴼᴾᴱᴺᴬᴵ 2023-12-09 19:24
    关注

    所有内容均由人工智能模型输出，其内容的准确性和完整性无法保证，不代表我的态度或观点。
    （讯飞星火专栏，V3.0版本，2023.10.24）

    该回答引用讯飞星火认知大模型，仅提供参考，不保证完全正确
    这个问题可能是由于在动态添加音频文件时，播放器没有正确地更新音频文件的路径。你可以尝试以下方法解决这个问题：

    1. 在添加音频文件时，确保为每个音频元素分配一个唯一的ID。
    2. 使用JavaScript为每个音频元素设置src属性，使其指向正确的音频文件路径。
    3. 在设置src属性后，调用load()方法加载音频文件。
    4. 调用play()方法播放音频文件。

    以下是一个示例代码：

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>动态添加音频文件</title>
</head>
<body>
    <button onclick="addAudio()">添加音频</button>
    <div id="audioContainer"></div>
    <script>
        function addAudio() {
            var audioContainer = document.getElementById("audioContainer");
            var audio = document.createElement("audio");
            audio.id = "audio_" + audioContainer.childElementCount; // 为每个音频元素分配一个唯一的ID
            audio.src = "path/to/your/audio/file"; // 设置音频文件路径
            audio.load(); // 加载音频文件
            audioContainer.appendChild(audio); // 将音频元素添加到容器中
            audio.play(); // 播放音频文件
        }
    </script>
</body>
</html>

    请将上述代码中的path/to/your/audio/file替换为实际的音频文件路径。点击“添加音频”按钮后，将在页面上动态添加一个新的音频元素，并播放对应的音频文件。

    评论

报告相同问题？

  • amr文件播放
    2018-12-15 22:41
    在IT行业中，音频文件的处理是一项常见的任务，尤其是在网页应用中。AMR（Adaptive Multi-Rate）是一种广泛用于语音编码的格式，尤其在移动通信领域。然而，AMR文件在浏览器中的直接播放并不是所有平台都支持的原生...
  • 音频播放图标CSS3特效特效代码
    2021-03-20 03:02
    本话题聚焦于“音频播放图标CSS3特效”，这是一个利用CSS3的关键帧动画（keyframes）属性来创建动态、吸引人的音频播放图标的设计技术。 首先，我们来理解CSS3的关键帧动画。关键帧动画是通过定义动画过程中的特定...
  • 使用audio标签播放mp3,amr,wav文件
    2019-07-02 16:55
    对于不支持的格式，可以使用多个`<source>`标签来提供备选格式，浏览器会自动选择第一个能播放的格式： ```html Your browser does not support the audio element. ``` 四、音频文件转换 如果浏览器不...
  • Python如何播放本地音乐并在web页面播放
    2025-02-17 16:32
    玩人工智能的辣条哥的博客 服务器端播放：如果只需要在服务器端播放音频文件，可以使用 Python 的第三方库如playsound。Web 页面播放：如果需要在 Web 页面中播放音频文件，建议使用 HTML5 的标签，并结合 Flask 或其他 Web 框架来创建 Web ...
  • 前端如何播放AMR格式的音频文件
    2024-09-19 10:23
    码农巧克零的博客 上游给到的音频文件是.amr格式，我也是第一次见这种格式的音频。我就像往常一样，直接通过一个audio标签来引入，结果发现根本播放不了。js代码解读复制代码在后续搜了一些资料发现，浏览器是不支持直接播放amr格式的...
  • 使用input框实现音频文件的上传与播放
    2024-06-18 15:43
    前端小码农.的博客 最近的系统加的功能是越来越多了，前两天老板又让实现一个录音上传的功能，可以点击播放按钮打开音频播放器，点击暂停按钮暂定播放。想了想决定使用input框的file类型加上接收的参数为audio来实现此功能。
  • 前端文件下载和文件读取方法研究
    2024-03-01 20:13
    Carlos_sam的博客 之前因为工作需要对geojson进行数据处理，在操作的过程中我就发现，自己手动去下载和读取文件就很麻烦。因此我就想在这里探讨一下如何在前端实现文件自动读取和下载。
  • audio 播放 后端的v3 文件流，这个流需要很长时间才能写完，只要有1s 的时长就开始播放，如何处理
    2024-07-18 09:46
    qq_33192454的博客 要实现音频播放时只要有1秒的时长就开始播放，而无需等待整个音频文件流写完，可以在后端直接传输音频流并在前端使用 MediaSource Extensions (MSE) 来处理和播放音频流。这种方法允许在接收到部分音频数据后立即...
  • java 上传mp3文件大小,Java获取音频文件（MP3）的播放时长
    2021-04-06 08:03
    weixin_39727934的博客 最近的一个项目需要按照时间播放mp3文件，例如，播放10分钟的不同音乐。这就意味着我得事先知道mp3文件的播放时长，以决定播放几遍这个文件。方案一：Java的方式找第三方的库，真的感谢这些提供jar包的高手，找到一...
  • 返回流文件前端处理方法(全)
    2022-09-14 15:25
    yun_shuo的博客 前后端分离项目中,为保证数据安全性,文件数据通常使用接口调用方式获取,后端返回二进制文件流后前端该如何处理
  • 没有解决我的问题, 去提问

问题事件

  • 创建了问题 12月9日