Autoplay audio in WordPress
Show
Closed. This question is off-topic. It is not currently accepting answers.
Want to improve this question? Update the question so it's on-topic for WordPress Development Stack Exchange. Closed 12 months ago. I am using the plugin ‘WP Maintenance Mode’ to load a under maintenance website on a website. I would like for audio to play as soon as somebody lands on the website and for audio player to remain invisible. BACK SOON [audio src="https://myWebsite/wp-content/uploads/2021/03/audio.mp3"]This will load the page and show the audio player and it will play when I press play I have tried [audio src="https://myWebsite/wp-content/uploads/2021/03/audio.mp3 width = "0" height = "0" autoplay=1]to try and get it to play automatically and without the audio player, but no success.
The WordPress Audio Player plugin is a compact HTML5 + flash hybrid based WordPress plugin which can be used to play an audio file (.mp3 or .ogg). The audio player is compatible with all major browsers and devices (Android, iPhone).
Audio Player Plugin ScreenshotThe following images show how the audio player looks when it is playing and not playing a music file: The following is a preview of how the audio player looks when using template 1: When the play button is clicked, the button will change to a pause button allowing users to pause the music playback. Audio Player Plugin Installation and Usage
[sc_embed_player fileurl="URL OF THE MP3 FILE"] Example shortcode:[sc_embed_player fileurl="https://www.example.com/wp-content/uploads/my-music/mysong.mp3"] Additional Usage DocumentationUsing Auto Play OptionUse the “autoplay” parameter in the shortcode to play the audio file on page load. Here is an example shortcode with autoplay option: [sc_embed_player autoplay=true fileurl="https://www.example.com/wp-content/uploads/my-music/mysong.mp3"] Specifying a Volume LevelUse the optional “volume” parameter in the shortcode to specify a volume level for the audio. You can use a value between 0 – 100 for the volume level. Here is an example shortcode usage: Looping the SoundUse the “loops” parameter in the audio player shortcode to loop an audio file playback automatically. Here is an example shortcode usage with auto loop: Specifying Both MP3 and OGG Files for the AudioNote: You don’t really need to use this option. You can just use the mp3 option and the plugin will make sure that the file is playable in all devices. You can specify both the files types in the “fileurl” parameter separating them with a “|” character. Here is an example shortcode usage that is specifying both the .mp3 and .ogg version of the audio file: Wrapping Text Around the Audio PlayerIf you want to wrap some text around the audio player then use the following in the “Text” view of the post/page editor: My Audio: [sc_embed_player fileurl="https://www.example.com/my-music/mysong.mp3"] Alternatively, use the following in the “Text” view of the post/page editor (wrap the audio player shortcode in another CSS class with float):Some example text
[sc_embed_player fileurl="https://www.example.com/my-music/mysong.mp3"]
Audio Player Template 1A few users have asked us to add a player template that has a seek bar and volume control. Audio player template1 gives you that option: Use the following shortcode to embed the audio player using template 1: [sc_embed_player_template1 fileurl="https://www.example.com/wp-content/uploads/my-music/mysong.mp3"]The above shortcode will produce an output like the following preview: This template1 shortcode supports “autoplay” and “loops” parameters too. Here is an example: Misc Tips and TweaksRemove the White Pixel/Dot on Black BackgroundIf you are using a WordPress theme with black background then you may notice a very small white dot below the audio player. Add the following block of CSS code to your theme’s CSS file to get rid of it: #sm2-container{ bottom: 0px; }Adding the Audio Player to a Theme’s Template FileYou can also embed the audio player in your theme’s template file. Here is an example code that you can add to your template file: Playing Audio on Your Home Page OnlyHere is an example code that you can add to your header.php or footer.php template file and it will autoplay the audio file on your home page only: Change the Player Background Color for Template 1Add the following CSS code to your theme’s CSS file or via the custom CSS plugin to change the player background color. The following example will change the color to red. .mejs-container, .mejs-embed, .mejs-embed body, .mejs-container .mejs-controls { background: red !important; }Disable Simultaneous Audio File PlaybackGo to the settings menu of this plugin and check the “Disable Simultaneous Play” option to turn off simultaneous audio file playback option. When this option is used, it will automatically stop the audio file that is currently playing when the visitor plays a new file. Autoplay is not Working on IOS DevicesIOS devices (iPhone iPad) do not allow you to do autoplay. This is a functionality that Apple prevents on their devices. Nothing we can do in the plugin for this unfortunately. Hosting Your Audio FilesThe most obvious choice is to upload your audio files to your site using WordPress’s media uploader. After you upload the audio file via media uploader, it will give you the URL of the file. You can then use the URL in the shortcode of this audio player plugin. Alternatively, you can host your audio files on Amazon s3. Download The Latest Version
Download Audio Player Version Plugin CompatibilityWorks with the latest version of WordPress. Plugin RequiresRequires WordPress 4.0 or higher.
Check out our projects page for more cool WordPress plugins. Reader Interactions |