个人中心
gpt4 book ai didi

javascript - HTML5 音频播放器停止和暂停按钮不起作用

转载 作者：行者123 更新时间：2023-11-28 08:33:58 26 4
gpt4 key购买 nike

我的播放按钮可以播放，音量增大和音量减小按钮可以工作，但暂停按钮和停止按钮不起作用。此外，它在 Chrome 中不起作用，但在 Firefox 和 Internet Explorer 中起作用。那么我该如何解决这个问题呢？谢谢。

这是我的代码

index.html

<!DOCTYPE html>
<html ng-app="plunker">
<head>
    <title>app</title>
    <link rel="stylesheet" type="text/css" href="css/main.css" media="screen" />
    <link href="menu_source/styles.css" rel="stylesheet" type="text/css">
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">

    <!-- Optional theme -->
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap-theme.min.css">
    <link rel="stylesheet" href="dist/css/bootstrap.min.css" rel="stylesheet" type="text/css">
    <!-- Latest compiled and minified JavaScript -->
    <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
    <script src="music.js"></script>
    <script src="example.js"></script>
    <script src="javascript/main.js"></script>
    <script src="angular.min.js"></script>
    <script>
        angular.module('myModule', ['ui.bootstrap']);
        var player;
        var intv;
        var slider;

        window.onload = function () {
            document.getElementById('btnPlay').addEventListener('click', playMusic, false);
            document.getElementById('btnPause').addEventListener('click', playMusic, false);
            document.getElementById('btnStop').addEventListener('click', playMusic, false);
            document.getElementById('btnVolUp').addEventListener('click', playMusic, false);
            document.getElementById('btnVolDown').addEventListener('click', playMusic, false);
            player = document.getElementById('player');
            slider = document.getElementById('sliderTime');
            slider.addEventListener('change', reposition, false);
            getMusicList();
        }

        function reposition() {
            player.currentTime = slider.value;
        }

        function volUp() {
            if (player.volume < 1) {
                player.volume += 0.1;
                console.log(player.volume);
            } else {
                player.volume = 1;
            }
        }

        function volDown() {
            if (player.volume > 0) {
                player.volume -= 0.1;
                console.log(player.volume);
            } else {
                player.volume = 0;
            }
        }

        function playMusic() {
            player.play();
            intv = setInterval(update, 100);
            slider.max = player.duration;
        }

        function update() {
            document.getElementById('songTime').innerHTML = millisToMins(player.currentTime);
            slider.value = player.currentTime;
        }

        function pauseMusic() {
            player.pause();
            clearInterval(intv);
        }

        function millisToMins(seconds) {
            var numminutes = Math.floor((((seconds % 31536000) % 86400) % 3600) / 60);
            var numseconds = (((seconds % 31536000) % 86400) % 3600) % 60;
            if (numseconds >= 10) {
                return "Time Elapsed:" + numminutes + ":" + Math.round(numseconds);
            } else {
                return "Time Elapsed: " + numminutes + ":0" + Math.round(numseconds);
            }
        }

        function stopMusic() {
            player.plause();
            player.currentTime = 0;
            clearInterval(myInterval);
        }

        function getMusicList() {
            var parser = new DOMParser();
            xmlDocument = parser.parseFromString(xml, "text/xml");
            var elementsArray = xmlDocument.documentElement.getElementsByTagName('composition');
            var arrayLength = elementsArray.length;
            var output = "<table>";
            for (var i = 0; i < arrayLength; i++) {
                var title = elementsArray[i].getElementsByTagName('title')[o].firstChild.nodeValue;
                var composer = elementsArray[i].getElementsByTagName('composer')[0].firstChild.nodeValue;
                var time = elementsArray[i].getElementsByTagName('time')[0].firstChild.nodeValue;
                var fileName = elementsArray[i].getElementsByTagName('filename')[0].firstChild.nodeValue;
                output += "<tr>";
                output += ("<td onclick='songSelect(\"" + fileName + "\")'>" + title + " By: " + composer + "</td>");
                output += "</tr>"

            }
            output += "</table>";
            document.getElementById('musicList').innerHTML = output;
        }

        function songSelect(fn) {
            document.getElementById('player').src = fn;
            playMusic();
        }
    </script>
    <style>
        #musicList td {
            border: 1px solid black;
            padding: 3px;
        }
        #musicList td:hover {
            background-color: #990000;
            color: white;
        }
    </style>
</head>
<body>
    <div id="content"></div>
    <div id="content1">
        <div id="audioPlayer">
            <audio id="player">
                <source src="sleepAway.ogg" type="audio/ogg">
                    <source src="sleepAway.mp3" type="audio/mpeg">
            </audio>
            <button onclick="playMusic()" id="btnPlay">Play</button>
            <button onclick="pauseMusic()" id="btnPause">Pause</button>
            <button onclick="stopMusic()" id="btnStop">Stop</button>
            <button onclick="volUp()" id="btnVolUp">Volume Up</button>
            <button onclick="volDown()" id="btnVolDown">Volume Down</button>
            <span id="songTime"></span>

            <input id="sliderTime" type="range" min="0" value="0" />
            <div id="musicList"></div>
</body>
</html>

音乐.js

var xml='<?xml version="1.0"?>';
xml +='<music>';
xml +=' <composition>';
xml +=' <title>O Mio Babbino Caro</title>';
xml +=' <composer>Puccini</composer>';
xml +=' <time>2:12</time>';
xml +=' <filename>SleepAway.mp3</filename>';
xml +=' </composition>';
xml +=' <composition>';
xml +=' <title>2:57</time>';
xml +=' <filename>gershwin.mp3</filename>';
xml +=' </composition>';
xml +=' <composition>';
xml +=' <title>The Man I Love</title>';
xml +=' <composer>Gershwin</composer>';
xml +=' <time>2:57</time>';
xml +=' <filename>gershwin.mp3</filename>';
xml +=' </composition>';
xml +=' <composition>';
xml +=' <title>2:57</time>';
xml +=' <filename>gershwin.mp3</filename>';
xml +=' </composition>';
xml +=' <composition>';
xml +=' <titleAllegro</title>';
xml +=' <composer>Beethoven</composer>';
xml +=' <time>3:45</time>';
xml +=' <filename>piano.mp3</filename>';
xml +=' </composition>';
xml +=' <composition>';

最佳答案

所有事件监听器都指向:“playMusic”，因此它们都充当播放按钮。

关于javascript - HTML5 音频播放器停止和暂停按钮不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21466461/

26 4 0
文章推荐： javascript - Google map API 未显示所有标记
文章推荐： javascript - 在 Javascript 中替换 innerHTML 后，复选框上的 OnClick 事件在 IE 中不起作用
文章推荐： javascript - expressjs中.get()需要回调函数错误，即使语法正确
文章推荐： javascript - Gingerbread 默认网络浏览器多次点击问题
行者123
个人简介

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

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