So ändern Sie den Stil des -Tags in HTML

Aufgrund der Beliebtheit von HTML5 kann Audio jetzt für die meisten Anforderungen auf mobilen Endgeräten verwendet werden. Möglicherweise benötigen Sie jedoch nur einen einfachen Wiedergabe-/Stopp-Effekt, aber die Audiostile sind in verschiedenen Browsern nicht zufriedenstellend Wie kann man diesen Stil ändern? Tatsächlich ist sein Prinzip relativ einfach: Verwenden Sie beim Schreiben von Audio nicht das Controls-Attribut, blenden Sie das native Audio aus und definieren Sie dann mit Tags wie p einen CSS-Stil, um es für die Anzeige zu verschönern Die Wirkung des Players und schließlich die Verwendung von js zum Erfassen von Audioereignissen, bei denen es sich im Grunde um SRC-Pfad, Pause, Laden und Abspielen handelt. Im Folgenden sind einige verwandte APIs des Audio-Tags aufgeführt:

Funktionsbeschreibung der Steuerfunktion

load(): Laden Sie Audio- und Videosoftware, normalerweise ist kein Aufruf erforderlich, es sei denn Es handelt sich um ein dynamisch generiertes Element, das zum Vorladen vor der Wiedergabe verwendet wird

play(): Audio- und Videodateien laden und abspielen, sofern die Datei nicht an anderen Orten angehalten wurde, wird die Wiedergabe standardmäßig erneut gestartet

pause(): Audio- und Videodateien im Wiedergabezustand anhalten

audioskriptfähiger Eigenschaftswert:

src: Pfad der Audiodatei.

Autoplay: Legen Sie fest, ob das Audio automatisch abgespielt wird (die Standardeigenschaft ist die automatische Wiedergabe geladener Mediendateien), oder prüfen Sie, ob es auf Autoplay eingestellt ist

Autobuffer: Legen Sie fest, ob Audio beim Laden der Seite automatisch gepuffert werden soll.

Schleife: Legen Sie fest, ob das Audio in einer Schleife abgespielt werden soll. , oder fragen Sie ab, ob es auf Schleife eingestellt ist

currentTime: Gibt die Zeit zurück, die vom Start der Wiedergabe bis zur Gegenwart in s verstrichen ist. Sie können den Wert von currentTime auch festlegen, um zu einer bestimmten Position zu springen

Steuerelemente: Zeigt oder verbirgt die Benutzersteuerungsoberfläche (Eigenschaften zum Hinzufügen von Wiedergabe-, Pausen- und Lautstärkereglern).

Lautstärke: Stellen Sie den Lautstärkewert zwischen 0,0 und 1,0 ein oder fragen Sie den aktuellen Lautstärkewert ab

stummgeschaltet: Legen Sie fest, ob stummgeschaltet werden soll.

Schreibgeschütztes Attribut Attributbeschreibung

Dauer: Rufen Sie die Wiedergabedauer der Mediendatei in Sekunden ab, wenn dies nicht möglich ist abgerufen werden, wird es NaN sein

paused: Gibt true zurück, wenn die Mediendatei angehalten ist, andernfalls wird false zurückgegeben

ended: Gibt true zurück, wenn die Mediendatei mit der Wiedergabe fertig ist

startTime: Gibt die Startzeit der Wiedergabe zurück, normalerweise 0,0, es sei denn, es handelt sich um eine gepufferte Mediendatei und ein Teil des Inhalts befindet sich nicht mehr im Puffer

Fehler: Der Fehlercode wird zurückgegeben, nachdem ein Fehler aufgetreten ist

currentSrc: als String Das Formular gibt die abgespielte oder geladene Datei zurück, entsprechend der vom Browser im Quellelement ausgewählten Datei

Für diese Attribute wird dies von Mainstream-Browsern unterstützt. Aber denken Sie nicht, dass es bei Audiowiedergabe-Streams keine Kompatibilität gibt. Firefox und Opera unterstützen OGG-Audio, Safari und IE unterstützen MP3. Glücklicherweise unterstützt Googles Chrome dies.

<p class="btn-audio"><audio id="mp3Btn"><source src="images/audio.mp3" type="audio/mpeg" /></audio></p>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.10.0/jquery.min.js"></script>

body{
    background:#2b2938;
}
.btn-audio{
    margin: 90px auto;
    width: 186px;
    height: 186px;
    background:url(images/voice_stop.png) no-repeat center bottom;
    background-size:cover;
}

<script type="text/javascript">
    $(function(){
        //播放完毕
        $(&#39;#mp3Btn&#39;).on(&#39;ended&#39;, function() {
            console.log("音频已播放完成");
            $(&#39;.btn-audio&#39;).css({&#39;background&#39;:&#39;url(images/voice_stop.png) no-repeat center bottom&#39;,&#39;background-size&#39;:&#39;cover&#39;});
        })
        //播放器控制
        var audio = document.getElementById(&#39;mp3Btn&#39;);
        audio.volume = .3;
        $(&#39;.btn-audio&#39;).click(function() {
            event.stopPropagation();//防止冒泡
            if(audio.paused){ //如果当前是暂停状态
                $(&#39;.btn-audio&#39;).css({&#39;background&#39;:&#39;url(images/voice_play.png) no-repeat center bottom&#39;,&#39;background-size&#39;:&#39;cover&#39;});
                audio.play(); //播放
                return;
            }else{//当前是播放状态
                $(&#39;.btn-audio&#39;).css({&#39;background&#39;:&#39;url(images/voice_stop.png) no-repeat center bottom&#39;,&#39;background-size&#39;:&#39;cover&#39;});
                audio.pause(); //暂停
            }
        });
    })
</script>

Als technische Implementierung ist das Prinzip relativ einfach: Das native Audio auszublenden, dann mit p den Player-Effekt anzuzeigen und dann sein Klickereignis aufzurufen Manchmal kann dieser Wert abgerufen werden, manchmal jedoch nicht, was etwas schwierig ist. Daher wird empfohlen, das Dauerattribut im Audio-Tag anzupassen, um die Dauer zu speichern Wenn die Komponente ihn nicht erhalten kann, erhält sie diesen Wert.

this.settings.target.on('loadedmetadata', function() { 
_this.duration = _this.audio.duration; 
if (_this.duration != "Infinity") { 
_this.durationContent.html(Math.floor(_this.duration) + 's'); 
} else { 
var attr = $(_this.settings.target).attr('duration'); 
if(attr){ 
_this.durationContent.html($(_this.settings.target).attr('duration')+"s"); 
}else{ 
_this.durationContent.html(''); 
} 
} 
});

Das obige ist der detaillierte Inhalt vonSo ändern Sie den Stil des