简体   繁体   English

如何在浏览器音频播放器中添加静音/取消静音按钮?

[英]How to add mute/unmute button to browser audio player?

So I have my code here, and it works great. 所以我的代码在这里,并且效果很好。 Only thing is there are no mute/unmute buttons and I have no idea how to add them. 唯一的事情是没有静音/取消静音按钮,我也不知道如何添加它们。

<audio src="MUSIC URL" autoplay loop>
    <p>Your browser does not support the audio element </p>
</audio>

I use this, get a play and pause button .png and use them. 我使用它,获得一个播放和暂停按钮.png并使用它们。 Then make a folder called audio and put the files in there for you music. 然后创建一个名为audio的文件夹,并将文件放在其中以供您欣赏音乐。 I put the play and pause in a folder called images. 我将播放并暂停在一个名为images的文件夹中。

 <style type="text/css"> audio {visibility: hidden; height: 0; width: 0; position: absolute; top: -300px; left: -300px;} #pauseplay {float: right; width: 48px; height: 48px; overflow: hidden; cursor: pointer} </style> <audio controls loop> <source src="**your website url here**/audio/waves.ogg" type="audio/ogg"> <source src="**your website url here**/audio/waves.mp3" type="audio/mpeg"> </audio> <img id="pauseplay" src="**your website url here**/images/play.png" alt="button" title="Play/Pause"> <script type="text/javascript"> (function(){ var playing = !!('ontouchstart' in window) || !!('ontouchstart' in document.documentElement) || !!window.ontouchstart || (!!window.Touch && !!window.Touch.length) || !!window.onmsgesturechange || (window.DocumentTouch && window.document instanceof window.DocumentTouch), snd = document.getElementsByTagName('audio')[0], ctrl = document.getElementById('pauseplay'); playing = !playing; ctrl.title = playing? 'Pause' : 'Play'; if(playing){snd.autoplay = false; ctrl.src = '**your website url** here/images/pause.png';} ctrl.addEventListener('click', function(){ if(playing){ snd.pause(); } else { snd.play(); } playing = !playing; ctrl.title = playing? 'Pause' : 'Play'; ctrl.src = playing? '**your website url here**/images/pause.png' : '**your website url here**/images/play.png'; }, false); })(); </script> 

If you want to see it live l ook at this site I made. 如果您想现场观看它,请浏览我制作的这个站点

You should add controls attribute to audio tag. 您应该将controls属性添加到audio标签。

If this attribute is present, the browser will offer controls to allow the user to control audio playback, including volume, seeking, and pause/resume playback. 如果存在此属性,则浏览器将提供控件以允许用户控制音频播放,包括音量,搜索和暂停/继续播放。 developer.mozilla developer.mozilla

 <audio src="http://audiomicro-dev.s3.amazonaws.com/preview/1030/caca5b5fcde48f9" controls> <p>Your browser does not support the audio element </p> </audio> 

Very easy: 很容易:

<button onclick="document.getElementsByTagName('audio')[0].play();">Sound on</button>
<button onclick="document.getElementsByTagName('audio')[0].pause();">Sound off</button>
<audio autoplay preload="auto" loop src="your.mp3"></audio>

It is set on autoplay and loop, you can pause and resume by clicking the buttons. 它设置为自动播放和循环播放,您可以通过单击按钮暂停和继续播放。 The best way to avoid diplaying the unsuitable browser player. 避免显示不合适的浏览器播放器的最佳方法。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM