WordPress: Ενσωμάτωση προγράμματος αναπαραγωγής MP3 στην ανάρτηση ιστολογίου σας

Blog Post MP3 Player με WordPress

Με το podcasting και την κοινή χρήση μουσικής τόσο διαδεδομένη στο διαδίκτυο, υπάρχει μια μεγάλη ευκαιρία να βελτιώσετε την εμπειρία των επισκεπτών σας στον ιστότοπό σας ενσωματώνοντας ήχο στις αναρτήσεις του ιστολογίου σας. Ευτυχώς, το WordPress συνεχίζει να εξελίσσει την υποστήριξή του για ενσωμάτωση άλλων τύπων πολυμέσων - και mp3 τα αρχεία είναι ένα από αυτά που είναι εύκολο να γίνουν!

Ενώ η εμφάνιση ενός προγράμματος αναπαραγωγής για μια πρόσφατη συνέντευξη είναι μεγάλη, η φιλοξενία του πραγματικού αρχείου ήχου μπορεί να μην είναι σκόπιμη. Οι περισσότεροι οικοδεσπότες ιστού για ιστότοπους WordPress δεν είναι βελτιστοποιημένοι για ροή πολυμέσων - οπότε μην εκπλαγείτε εάν αρχίσετε να αντιμετωπίζετε κάποια ζητήματα όπου ξεπερνάτε τα όρια στη χρήση του εύρους ζώνης ή τις στάσεις ήχου σας. Θα συνιστούσα να φιλοξενήσετε το πραγματικό αρχείο ήχου σε μια υπηρεσία ροής ήχου ή μια μηχανή φιλοξενίας podcast. Και… βεβαιωθείτε ότι ο κεντρικός υπολογιστής σας υποστηρίζει SSL (μια διαδρομή https: //)… ένα blog που φιλοξενείται με ασφάλεια δεν θα αναπαράγει ένα αρχείο ήχου που δεν φιλοξενείται με ασφάλεια αλλού.

Ωστόσο, γνωρίζετε τη θέση του αρχείου σας, η ενσωμάτωσή του σε μια ανάρτηση ιστολογίου είναι αρκετά απλή. Το WordPress έχει το δικό του πρόγραμμα αναπαραγωγής ήχου HTML5 ενσωματωμένο απευθείας σε αυτό, ώστε να μπορείτε να χρησιμοποιήσετε έναν σύντομο κωδικό για να εμφανίσετε τη συσκευή αναπαραγωγής.

Ακολουθεί ένα παράδειγμα από ένα πρόσφατο επεισόδιο podcast που έκανα:

Με την τελευταία επανάληψη του προγράμματος επεξεργασίας Gutenberg στο WordPress, μόλις επικολλήσαμε τη διαδρομή αρχείου ήχου και ο συντάκτης δημιούργησε πραγματικά τον σύντομο κώδικα. Ακολουθεί ο πραγματικός σύντομος κωδικός, όπου θα αντικαταστήσετε το src με την πλήρη διεύθυνση URL του αρχείου που θέλετε να παίξετε.

[audio src="audio-source.mp3"]

Το WordPress υποστηρίζει τύπους αρχείων mp3, m4a, ogg, wav και wma. Μπορείτε ακόμη και να έχετε έναν σύντομο κωδικό που παρέχει εναλλακτικό σε περίπτωση που οι επισκέπτες χρησιμοποιούν προγράμματα περιήγησης που δεν υποστηρίζουν το ένα ή το άλλο:

[audio mp3="source.mp3" ogg="source.ogg" wav="source.wav"]

Μπορείτε επίσης να βελτιώσετε τον σύντομο κώδικα με άλλες επιλογές:

  • loop - μια επιλογή για βρόχο του ήχου.
  • αυτόματη αναπαραγωγή - μια επιλογή για αυτόματη αναπαραγωγή του αρχείου μόλις φορτωθεί.
  • preload - μια επιλογή για προφόρτωση του αρχείου ήχου με τη σελίδα.

Βάλτε τα όλα μαζί και δείτε τι έχετε:

[audio mp3="source.mp3" ogg="source.ogg" wav="source.wav" loop="yes" autoplay="on" preload="auto"]

Λίστες αναπαραγωγής ήχου στο WordPress

Αν θέλετε να έχετε μια λίστα αναπαραγωγής, το WordPress δεν υποστηρίζει προς το παρόν εξωτερική φιλοξενία καθενός από τα αρχεία σας για αναπαραγωγή, αλλά το προσφέρει αν φιλοξενείτε εσωτερικά τα αρχεία ήχου σας:

[playlist ids="123,456,789"]

Υπάρχουν μερικές λύσεις εκεί έξω που μπορείτε να προσθέσετε στο παιδικό σας θέμα που θα επιτρέψει τη φόρτωση εξωτερικών αρχείων ήχου.

Προσθέστε τη ροή RSS Podcast στην πλευρική σας γραμμή

Χρησιμοποιώντας το πρόγραμμα αναπαραγωγής WordPress, έγραψα μια προσθήκη για να εμφανίσω αυτόματα το podcast σας σε ένα widget πλευρικής γραμμής. Μπορείς Διαβάστε εδώ για αυτό κατεβάστε την προσθήκη από το αποθετήριο WordPress.

Προσαρμογή του WordPress Audio Player

Όπως μπορείτε να δείτε από τον δικό μου ιστότοπο, το MP3 player είναι αρκετά βασικό στο WordPress. Ωστόσο, επειδή είναι HTML5, μπορείτε να το ντύσετε αρκετά χρησιμοποιώντας CSS. Το CSSIgniter έχει γράψει ένα εξαιρετικό σεμινάριο για προσαρμογή του προγράμματος αναπαραγωγής ήχου οπότε δεν θα τα επαναλάβω όλα εδώ ... αλλά εδώ είναι οι επιλογές που μπορείτε να προσαρμόσετε:

/* Player background */
.mytheme-mejs-container.mejs-container,
.mytheme-mejs-container .mejs-controls,
.mytheme-mejs-container .mejs-embed,
.mytheme-mejs-container .mejs-embed body {
  background-color: #efefef;
}

/* Player controls */
.mytheme-mejs-container .mejs-button > button {
  background-image: url("images/mejs-controls-dark.svg");
}

.mytheme-mejs-container .mejs-time {
  color: #888888;
}

/* Progress and audio bars */

/* Progress and audio bar background */
.mytheme-mejs-container .mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-total,
.mytheme-mejs-container .mejs-controls .mejs-time-rail .mejs-time-total {
  background-color: #fff;
}

/* Track progress bar background (amount of track fully loaded)
  We prefer to style these with the main accent color of our theme */
.mytheme-mejs-container .mejs-controls .mejs-time-rail .mejs-time-loaded {
  background-color: rgba(219, 78, 136, 0.075);
}

/* Current track progress and active audio volume level bar */
.mytheme-mejs-container .mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-current,
.mytheme-mejs-container .mejs-controls .mejs-time-rail .mejs-time-current {
  background: #db4e88;
}

/* Reduce height of the progress and audio bars */
.mytheme-mejs-container .mejs-time-buffering,
.mytheme-mejs-container .mejs-time-current,
.mytheme-mejs-container .mejs-time-float,
.mytheme-mejs-container .mejs-time-float-corner,
.mytheme-mejs-container .mejs-time-float-current,
.mytheme-mejs-container .mejs-time-hovered,
.mytheme-mejs-container .mejs-time-loaded,
.mytheme-mejs-container .mejs-time-marker,
.mytheme-mejs-container .mejs-time-total,
.mytheme-mejs-container .mejs-horizontal-volume-total,
.mytheme-mejs-container .mejs-time-handle-content {
  height: 3px;
}

.mytheme-mejs-container .mejs-time-handle-content {
  top: -6px;
}

.mytheme-mejs-container .mejs-time-total {
  margin-top: 8px;
}

.mytheme-mejs-container .mejs-horizontal-volume-total {
  top: 19px;
}

Βελτιώστε το πρόγραμμα αναπαραγωγής MP3 του WordPress

Υπάρχουν επίσης μερικά πρόσθετα επί πληρωμή για την προβολή του ήχου MP3 σε ορισμένες εντυπωσιακές συσκευές αναπαραγωγής ήχου:

Αποκάλυψη: Χρησιμοποιώ τους συνδέσμους συνεργατών μου για τις παραπάνω προσθήκες μέσω CodeCanyon, ένας φανταστικός ιστότοπος προσθηκών που διαθέτει καλά υποστηριζόμενα πρόσθετα και εξαιρετική εξυπηρέτηση και υποστήριξη.

Ποια είναι η γνώμη σας;

Αυτός ο ιστότοπος χρησιμοποιεί το Akismet για να μειώσει το spam. Μάθετε πώς επεξεργάζονται τα δεδομένα των σχολίων σας.