Snippets Collections
/* Global Reset */

* {

    font-family: 'Allerta', arial, Tahoma;

    box-sizing: border-box;

}

body {

    background: linear-gradient(to left, #7700aa, #800ff);
8
    text-align:center;

    color:#fff;

}

h3{

    text-shadow:1px 1px 1px #fff;

}

/* Start  styling the page */

.container-audio {

    width: 66%;

    height: auto;

    padding: px;

    border-radius: 5px;
20
    background-color: #eee;

    color: #444;

    margin: 20px auto;
<!-- Called of font style  file -->

​

<link href='https://fonts.googleapis.com/css?family=Allerta' rel='stylesheet'>

​

​

    <h2>Wellcome to Rofa Music store</h2>

    <div class="container-audio">

        <audio controls  loop autoplay>

                   <source src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/9473/new_year_dubstep_minimix.ogg" type="audio/ogg">

                   Your browser dose not Support the audio Tag

               </audio>

    </div>

    <div class="container-audio">

        <div class="colum1">

            <div class="row"></div>

        </div>

        <div class="colum1">

            <div class="row"></div>

        </div>

        <div class="colum1">
//JavaScript
$(document).ready(function() {
  var playing = false;

  // Add file names.
  $('.audio-button').each(function() {
    var $button = $(this);    
    var $audio = $button.find('audio');
    
    $($('<span>').text($audio.attr('src'))).insertBefore($audio);
  });

  // Add click listener.
  $('.audio-button').click(function() {
    var $button = $(this);    
    var audio = $button.find('audio')[0]; // <-- Interact with this!
    
    // Toggle play/pause
    if (playing !== true) {
      audio.play();
    } else {
      audio.pause();
    }

    // Flip state
    $button.toggleClass('playing');
    playing = !playing
  });
});


// CSS
.fa.audio-button {
  position:      relative;
  display:       block;
  width:         12em;
  height:        2.25em;
  margin-bottom: 0.125em;
  text-align:    left;
}

.fa.audio-button:after {
  position:      absolute;
  right:         0.8em;
  content:       "\f04b";
}

.fa.audio-button.playing:after {
  content:"\f04c";
}

// HTML
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button class="fa audio-button">
  <audio src="media/test.mp3"></audio>
</button>
<button class="fa audio-button">
  <audio src="media/test2.mp3"></audio>
</button>
<button class="fa audio-button">
  <audio src="media/test3.mp3"></audio>
</button>
<button class="fa audio-button">
  <audio src="media/test4.mp3"></audio>
</button>
call video play code on action , not on viewdidload

import AVFoundation
import AVKit

 var playerController = AVPlayerViewController()
 var player: AVPlayer?
 var playerItem: AVPlayerItem?
 var playerObserver: Any?

class VideoPlayerViewController: UIViewController, AVPlayerViewControllerDelegate {

    var playerController = AVPlayerViewController()
    
    override func viewDidLoad() {
        super.viewDidLoad()

    }
  
  func playVideo(url: URL) {
        player = AVPlayer(url: url)
        playerItem = player?.currentItem

        // Observe the player's current time to detect playback start
        playerObserver = player?.addPeriodicTimeObserver(forInterval: CMTime(seconds: 0.001, preferredTimescale: CMTimeScale(NSEC_PER_SEC)), queue: .main) { [weak self] time in
            guard let self = self else { return }

            if let currentItem = self.playerItem {
                let currentTime = currentItem.currentTime().seconds
                 
                if currentTime > 0.001 { // Adjust the threshold as needed
                    SVProgressHUD.dismiss()

                    // Pause the player and remove the observer
                   // self.player?.pause()
                    self.player?.removeTimeObserver(self.playerObserver!)

                    // Present AVPlayerViewController now that playback has started
                    self.present(self.playerController, animated: true) {
                        self.playerController.player = self.player
                        self.playerController.player?.play()
                    }
                }
            }
        }

        SVProgressHUD.show()
        player?.play()
    }
star

Tue Dec 06 2022 03:49:12 GMT+0000 (Coordinated Universal Time) https://codepen.io/Roro-decode/pen/VWpLRm

#music #player #css
star

Tue Dec 06 2022 03:48:50 GMT+0000 (Coordinated Universal Time) https://codepen.io/Roro-decode/pen/VWpLRm

#music #player #javascript
star

Mon Oct 17 2022 11:58:22 GMT+0000 (Coordinated Universal Time) https://stackoverflow.com/questions/37836002/jquery-multiple-audio-player-buttons

#javascript #audio #player #jquery
star

Tue Aug 30 2022 07:54:18 GMT+0000 (Coordinated Universal Time)

#ios #swift #video #player

Save snippets that work with our extensions

Available in the Chrome Web Store Get Firefox Add-on Get VS Code extension