Beispiel für die Produktion eines Musik-Players (html5)

Verwandte Fähigkeiten

• HTML5+CSS3 (Seitenlayout und dynamische Effekte implementieren)

• Iconfont (zum Hinzufügen die Vektorsymbolbibliothek verwenden Gerätebezogene Symbole abspielen)

• LESS (dynamisches CSS-Schreiben)

• jQuery (schnelles Schreiben von JS-Skripten)

• gulp+webpack (Automatisiertes Build-Tool zum Kompilieren und Komprimieren von Codes wie LESS, CSS, JS usw.)

Funktion implementiert

• Wiedergabepause (zum Wechseln des Wiedergabestatus klicken)

• Nächstes Lied (zum nächsten Lied wechseln)

• Zufallswiedergabe ( aktuelles Lied Nach dem Abspielen automatisch das nächste Lied abspielen)

• Einzelschleife (klicken Sie auf das Zufallswiedergabesymbol, um zur Einzelschleife zu wechseln)

• Lautstärkeanpassung (Bewegen Sie die Maus hinein und schieben Sie sie, um die Lautstärke einzustellen)

• Song-Fortschrittsbalken (Sie können klicken, um den Fortschritt direkt zu springen, oder Sie können auf den kleinen Punkt klicken und ziehen, um zu wechseln der Fortschritt)

• Echtzeit-Lyrics (klicken Sie auf das Wort, wechseln Sie die Songtext-Oberfläche, scrollen Sie automatisch durch die Lyrics entsprechend dem Echtzeit-Fortschritt)

• Gefällt mir (klicken, um einen aktiven Effekt hinzuzufügen)

• Teilen (Sie können es direkt an Sina Weibo weitergeben)

Audio-Tag mit

• autoplayautomatische Wiedergabe

• loopLoop-Wiedergabe

• volume Lautstärkeeinstellung

• currentTimeAktuelle Abspielposition

• durationAudiolänge

• pausePause

• playWiedergabe

• ended Gibt zurück, ob der Ton beendet wurde

Code zum Abspielen und Anhalten

_Music.prototype.playMusic = function(){var _this = this;this.play.on('click', function(){if (_this.audio.paused) {
            _this.audio.play();
            $(this).html('');
        } else {
            _this.audio.pause();
            $(this).html('')
        }
    });
}

Barcode für den Musikfortschritt

_Music.prototype.volumeDrag = function(){var _this = this;this.btn.on('mousedown', function(){
        _this.clicking = true;
        _this.audio.pause();
    })this.btn.on('mouseup', function(){
        _this.clicking = false;
        _this.audio.play();
    })this.progress.on('mousemove click', function(e){if(_this.clicking || e.type === 'click'){var len = $(this).width(),
                left = e.pageX - $(this).offset().left,
                volume = left / len;if(volume <= 1 || volume >= 0){
                _this.audio.currentTime =  volume * _this.audio.duration;
                _this.progressLine.css(&#39;width&#39;, volume *100 +&#39;%&#39;);
            }
        }
    });
}

Code zum Hinzufügen von Liedtexten

_Music.prototype.readyLyric = function(lyric){this.lyricBox.empty();var lyricLength = 0;var html = &#39;<div class="lyric-ani" data-height="20">&#39;;
    lyric.forEach(function(element,index) {var ele = element[1] === undefined ? &#39;^_^歌词错误^_^&#39; :  element[1];
        html += &#39;<p class="lyric-line" data-id="&#39;+index+&#39;" data-time="&#39; + element[0] + &#39;"> &#39; +  ele + &#39; </p>&#39;;
        lyricLength++;
    });
    html += &#39;</div>&#39;;this.lyricBox.append(html);this.onTimeUpdate(lyricLength);
}

Es gibt viele Codes, daher werde ich sie nicht hinzufügen Wenn du es gut findest, kannst du es auch mit einem Stern auf meinem GitHub versehen. Dein „Gefällt mir“ und „Stern“ sind meine Motivation, weiterzumachen, vielen Dank! ! ! Quellcodegruppe

Das obige ist der detaillierte Inhalt vonBeispiel für die Produktion eines Musik-Players (html5). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!