javascript - HTML 5 Shoutcast 流不工作

标签 javascript html twitter-bootstrap shoutcast

所以,我有一个相当简单的设置。

该网站可查看here

图标的 Bootstrap 库是 here

<head>
    <style>
        #pButton{
            height:60px;
            width: 60px;
            border: none;
            background-size: 50% 50%;
            background-position: center;
        }
    </style>
    <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min$
    <link href="css/ripples.min.css" rel="stylesheet">
    <link href="css/material-wfont.min.css" rel="stylesheet">
</head>
<body>
    <div class="container">
        <audio id="music">
            <source src="http://listen.fillyradio.com:8006/;stream" type="audio/mpeg" />
        </audio>
        <div id="audioplayer">
            <button id="pButton" class="mdi-av-play-circle-outline" onclick"play()"></button>
        </div>
    </div>
    <script>
        // variable to store HTML5 audio element
        var music = document.getElementById('music');

        function play() {
            if (music.paused) {
                music.play();
                pButton.className = "";
                pButton.className = "mdi-av-pause-circle-outline";
            } else {
                music.pause();
                pButton.className = "";
                pButton.className = "mdi-av-play-circle-outline";
            }
        }
    </script>
</body>

我的问题?播放器在启用控件的情况下工作正常,但我希望能够使用自定义控件,而不是默认的浏览器控件。

按钮会点击,但不会模仿音频或更改图标。

有什么想法吗?

最佳答案

<button id="pButton" class="mdi-av-play-circle-outline" onclick"play()"></button> 

onclick 之后您需要 =

<button id="pButton" class="mdi-av-play-circle-outline" onclick="play()"></button>

关于javascript - HTML 5 Shoutcast 流不工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27748098/

相关文章:

jquery - 如何使用jquery带点击功能

javascript - 使用js生成时文本超出div

php - 如何在 zend framework 1 应用程序中使用 twitter bootstrap 框架?

javascript - 绕过 stopPropagation()

javascript - Angular Google map 奇怪的 forloop 问题

javascript - 将逗号分隔的字符串分隔为新字符串

html - 文本区域边框颜色没有完全改变

javascript - 嵌入式YouTube iframe的onReady不触发

javascript - 符号之间的字符串替换?

html - CSS 相对于彼此定位两个元素,并在调整大小时保持在那里