个人中心
gpt4 book ai didi

javascript - 处理器音频JavaScript HTML5

转载 作者：行者123 更新时间：2023-12-03 02:02:22 26 4
gpt4 key购买 nike

有一个js脚本:

<script>
function start1() {
var audio = new Audio();
audio.src = URL.createObjectURL(document.getElementById('f1').files[0]);
audio.autoplay = true;
}
function start2() {
var audio = new Audio();
audio.src = URL.createObjectURL(document.getElementById('f2').files[0]);
audio.autoplay = true;
}
...
function stop() {
var audio = new Audio();
audio.stop();
}
</script>

和html代码: 
<body>
<input type="file" id="f1"></input>
<input type="file" id="f2"></input>
...
<button onmousedown="start1()" onmouseup="stop()">1</button>
<button onmousedown="start2()" onmouseup="stop()">2</button>
...

通过脚本可以理解，他播放的声音文件是通过使用表单文件加载的。

但是有两个问题:
1)要求仅在按下事件时才播放声音(按下鼠标)，释放鼠标按钮时才停止播放声音(按下鼠标)。
现在，声音播放到最后，无论您单击鼠标按钮并放开它都无所谓(因为对此条件没有测试)。
2)还需要创建脚本的简化版本，因为要处理的功能应为16个，但不能手动注册每个功能。您必须创建一个生成的脚本来处理ID的N个数字(start1，start2等，f1，f2等)。

帮助修改代码，也可以对jquery进行完全编码。这并不重要。
谢谢。

最佳答案

您可以使用局部变量，只需要一个标识符即可在以后找到音频元素。您还需要将音频元素附加到DOM。

另外，您必须使用pause()而不是stop()。

        <script>
        function start(id, source) {
                var aud = document.getElementById(id);

                if (aud) {
                    aud.parentNode.removeChild(aud);
                }

                var audio = new Audio();
                audio.setAttribute("id", id);
                audio.src = URL.createObjectURL(document.getElementById(source).files[0]);
                document.body.appendChild(audio);
                audio.autoplay = true;
            }

            function stop(id) {
                var aud = document.getElementById(id);
                aud.pause();
            }
    </script>

    <input type="file" id="f1"></input>
    <input type="file" id="f2"></input>
    <button onmousedown="start('1', 'f1')" onmouseup="stop('1')">1</button>
    <button onmousedown="start('2', 'f2')" onmouseup="stop('2')">2</button>

关于javascript - 处理器音频JavaScript HTML5，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30356782/

26 4 0
文章推荐： javascript - 使用 Javascript 获取音频文件元信息(标题/流派)
文章推荐： elasticsearch - 意外的区分大小写
文章推荐： elasticsearch - Elasticsearch 中的过滤查询
文章推荐： objective-c - 如何使用AVQueuePlayer nad AVPlayerItem
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com