如何通過檔案名從表中選擇音頻檔案，以便只有一個主要音頻元素播放所選檔案的音頻？

我正在制作一個在瀏覽器中加載檔案的表格。我想通過單擊檔案名從表中選擇一個檔案，以便音頻元素播放所選檔案的音頻。

現在我有一個回圈遍歷目錄中的所有檔案，并在左側的表格單元格中顯示檔案名。在表格右側的單元格中有多個可播放的音頻元素，它們對應于具有左側單元格名稱的檔案。

這是表格：

<div class="table-wrapper-scroll-y my-custom-scrollbar">
<table class="table table-bordered table-striped mb-0">
    <tbody>  
        @if (filesList != null && filesList.Count > 0)
            {
                int auF = 0;
                @foreach (string file in filesList)
                {    auF  ;
                     <tr> 
                         <td>
                             <span>@auF.</span>
                             <span @onclick="@(e=>readFile(file))" style="cursor:pointer;">@file</span>
                             </td> <td>
                             <audio controls="controls">
                                 <source src="@file">
                             </audio>
                        </td> 
                     </tr>
                }
            }
        else
        {
            <tr>
                <td>No files</td>
            </tr>
        }
    </tbody>
</table>

代碼：

@code{
List<string> filesList = new List<string>();
string path = $"{Directory.GetCurrentDirectory()}{@"\path"}";

protected override void OnInitialized()
{
    var files = Directory.GetFiles(path);
    foreach (var file in files)
    {
        filesList.Add(Path.GetFileName(file));
    }
}

public void readFile(string fileName)
{
}
}

我怎樣才能在表格之外只有一個主要音頻元素，這樣當我選擇一個檔案名時，音頻元素可以播放該選定的音頻？

uj5u.com熱心網友回復：

為了能夠只使用一個 HTMLaudio播放器，您需要創建一個自定義組件來包含音頻元素，并在從表中選擇音頻檔案時執行必要的邏輯，其中包括以下內容：

1. 重置音頻播放器
2. 使用所選音頻src的當前更新音頻URL
3. 自動播放音頻檔案

MyAudioPlayer零件：

<audio @key="@(audioId)" controls autoplay>
    <source src="@Url">
    Your browser does not support the html audio tag.
</audio>

@code {
    private string Url { get; set; }
    private Guid audioId = Guid.NewGuid();

    public void Reload(string url)
    {
        audioId = Guid.NewGuid(); // reload the player
        Url = url;
        InvokeAsync(StateHasChanged);
    }
}

筆記：

• 不要忘記namespace在頁面中包含組件的。
• 將音頻檔案wwwroot作為網路資產存盤在檔案夾中，例如。內部wwwroot\audio\，以便音頻播放器可以通過其 url 訪問它們。
• 創建一個類，例如。AudioFile存盤音頻檔案屬性，例如最后修改日期和檔案大小以顯示在表格中。

執行：

@page "/"
@using BlazorApp1.Components
@inject IWebHostEnvironment env

<MyAudioPlayer @ref="myAudioPlayer"/>

<table class="table table-striped mb-0">
    <thead>
    <tr>
        <th scope="col">#</th>
        <th scope="col">Name</th>
        <th scope="col">Last Modified</th>
        <th scope="col">Size</th>
    </tr>
    </thead>
    <tbody>
    @if (audioList.Count > 0)
    {
        @foreach (var file in audioList)
        {
            <tr>
                <td>@(audioList.IndexOf(file)   1)</td>
                <td>
                    <a @onclick="@(() => myAudioPlayer.Reload(file.Url))"
                       class="link-primary"
                       role="button">
                        @file.Name
                    </a>
                </td>
                <td>@file.LastModified.ToString("dd-MMM-yyyy HH:mm")</td>
                <td>@FileSizeFormatter.FormatSize(file.Length)</td>
            </tr>
        }
    }
    else
    {
        <tr>
            <td>No files</td>
        </tr>
    }
    </tbody>
</table>

@code{
    MyAudioPlayer myAudioPlayer;
    readonly List<AudioFile> audioList = new();
    readonly string audioFolderName = "audio";

    protected override void OnInitialized()
    {
        var path = $"{env.WebRootPath}\\{audioFolderName}\\";
        var d = new DirectoryInfo(path);
        var files = d.GetFiles();

        foreach (var file in files)
        {
            audioList.Add(new AudioFile
            {
                Name = file.Name,
                Url = $"/audio/{file.Name}",
                Length = file.Length,
                LastModified = file.LastWriteTime
            });
        }
    }

    public class AudioFile
    {
        public string Name { get; set; }
        public string Url { get; set; }
        public long Length { get; set; }
        public DateTime LastModified { get; set; }
    }

    public static class FileSizeFormatter
    {
        static readonly string[] suffixes = { "Bytes", "KB", "MB", "GB", "TB", "PB" };

        public static string FormatSize(long bytes)
        {
            var counter = 0;
            decimal number = bytes;
            while (Math.Round(number / 1024) >= 1)
            {
                number = number / 1024;
                counter  ;
            }
            return $"{number:n1}{suffixes[counter]}";
        }
    }
}

演示：

標籤：html西装外套blazor 服务器端

上一篇：我正在嘗試將性別作為php中的輸入，但我無法驗證輸入

下一篇：觸發onclick事件時獲取$(this)