BASE64音声の埋め込み

HTML文書の中にBASE64エンコードした音声を取り込みました。

 


#!/bin/bash
mp3file="hello.mp3"
htmlfile="hello.html"

cat << _HEADER_ > $htmlfile
<table align="center" bgcolor="white">
<caption><span style="font-size: 100%;">表 日本語-中国語対応表</span></caption>
<tbody>
<tr>
<th style="border: 2px solid #000000;" width="200">日本語</th>
<th style="border: 2px solid #000000;" width="200">中国語</th>
<th style="border: 2px solid #000000;" width="200"> 拼音</th>
<th style="border: 2px solid #000000;" width="200"> 音声</th>
</tr>
<tr>
<td style="border: 2px solid #000000;" align="center">ハローワールド</td>
<td style="border: 2px solid #000000;" align="center">你好世界</td>
<td style="border: 2px solid #000000;" align="center">Nǐ hǎo shìjiè</td>
<td style="border: 2px solid #000000;" align="center">
<audio controls="controls" autoplay style="border:3px solid red;">
_HEADER_

printf "<source src=\"data:audio/wav;base64," >> $htmlfile
base64 -w0 $mp3file >> $htmlfile
printf "\" type=\"audio/mp3\" />\n" >> $htmlfile

cat << _FOOTER_ >> $htmlfile
</audio>
</td>
</tr>
</tbody>
</table>
_FOOTER_ 

 

事前に「你好世界」と読み上げている音声をhello.mp3というファイル名で録音しておきます。この音声ファイルをbase64コマンドでエンコードしたものをhello.html内に直接埋め込むようにします。元の音声ファイルと比べて極端に大きな容量になるのかと思いきや、わずか4/3倍になるだけでした。小さな音声ファイルならリンクを貼るよりも可搬性が高くなります。太赤線で囲まれたオーディオコントロールで再生ボタンを押すと、「你好世界」と読み上げてくれます。

f:id:S_E_Hyphen:20191201155144p:plain

以前 のようにバイナリデータではないため、MYSQLへの登録も容易になるのではないかと期待しています。

 

以下、base64 -w0 hello.mp3 の実行結果

//NAxAASCDocAAiGBBkAAEN0AAAQQPh9soNBwEAQOT5yJ3hiUOcgUBA56wfiAMawsCEvEBwHwQcH6ZPxBBwMKOA+UBDw/iBxQMROH+Qy73fqOFwfD6pkqOCVF2iOJORUj4osrDCiSTn/80LEEhP5riQAMMSUOrnG/VSbPby101Lyq39SzGoqlLrZAJ20mRJRNQuGg6RoSS5V0ksFVB0NckRgsBS0kCs8HbCuMfs1x4BWdDlaitiToCFmFBmKjAM4cnCVszWtyJ0YgIgASIdkENz/80DEHhdB9jAA0oSYkNH7kZdiMmITR+UHi3sZ//r9PVX1fadvun//17NV3JQpzEZKnETi+QryHsqdQ+HotOCpcH1yC1h9xQhdKB+ZnVMEkDEgiFAUYkNRigIHAlAZ7J4OGBkYzA4cMf/zQsQcGXHaUADjypSjBgaMUAwfo/ydox4wKi8dvd6b37PvV/8/0+P/emvJq/XPOS9aEui2U5ic9vRl72+c7qczBMWAQgoQBpDCW///9Py46BDl9RizrcJqJPg/VGgiOfExYVhgCAktjP/zQMQSF0HmfADh0pgOABHEJDTnYwfRHuoYMSm///////wue/bFZIm354RhtoV7CxWKydRiFoyNtR1QXIydJjcSJGyhJAUHDHtRiCThd7P///+Q853KdWjDHLGUM9JBhytaY1Oi2+fI//NCxBAWieKQANNYmAi1QrUVZwl/mRur////zMzMzWk5N5uRSeS47ZpWLxgo+bpB3MDNphhgSgGcwT98lDSH52d4uOh7TLFkr9VIqB9ALP////0K3e30Kuf3WUpTmMhqgEkQM6tBzCwA//NAxBEXce6UANqemGiH10Fs9/Nf////////+LZvjeOwqZFquT0bJXrm8eaZZEUuVwaCwkDuOYchlkgIRAcWVQIUzHQsPXra0MTi8cJIUbIJu////1r0fu+ux3juUyVYUqlDG0RZYyb/80LEDhdp5pgA0d6YnbV64SAkWP9RqX/////////9WiRPmE+b2A/zrb4M1roa+VCxEj3fMawXdD2lmiHaeQ/VGXw0EhhvQ1IqSGq3bNCbYESeR4wkkF///////01rJmBWLgdMEvAAWwr/80DEDBaR3pQAopiV1k2lAagEybbGI1EQ3//+ZmZmkzMzOa5N9m10SsExL9qEGp4PyAFGXZpCYlwljSDdGdiCeCUPI5BkwSTwvIZZVGpMWNfZdCiVna8OxzIQFf/KrT6l7JDCTw74Gv/zQsQMFoIKkADbWJgd3KLlhSSwNRGVa504LM+t/qb+t/6jz5mZhKVzCl//GXzg3h797xyEaluzehukH9exfPWByCIijtV35lcZWiepkzWLIf2ZmZ1ziICa3B/WdybiEPu419ZhkSvxqf/zQMQOFHG2lADCypQ9r9RVdYbAISFun1tUc5kfbmwmfl770E3uDmIFFg8adrxEpVmdVt9tkT2SZHPiSuYDDRU6KogVXGqfHvntnmli5BfHrf6lDOpWZwrnruS5xQe6uISQE3nnyKbz//NCxBcRWOacABDScG1TnQELTa1A2AQveVIw5b+qZWWFgSEJMLvKCOMF5VCVLvFlvBahAWUFaG/X/31K/78////llwOzRLh0IAKgkDvaWFjC8mAmEHRWbuhF6dS13R6k332////UzMV1//NAxC0Tgf6QAArEmDiiiSNsxGtMlYZcI1H1n72KfGDBZLEva0Ws0eF69jXi6P/m/in0vS5eIThCBFGkMQ/EKAoSh1MIPWG465deEZa5zb+rdP///+rTMDcZGBgzOQQU71BnUePvo3L/80LEOhIx5pAAAsSYlhJYEAojCABJQVR7v9Ou/9KRC7i5qur++87pnfp2xWU936sVFKI1sopkUW4G4jEIdKJFxDQUbNchDibyXu///////ONOgcHICMLkGkww6H2oEFJ+hnXiPICBTpT/80DETRNBvpwAe8qU66AdxAj9skyrVIelOHGRSUo9gRB2B+i1qwnioFnAE4iYuSBL4oTrJWEjTzHPSINCJ5ljJn////355NGY96FzDzhHFYDwnEQTFizlgTRNT675QHJHdRuNTdZ7Uf/zQsRbE/HCuABrzpSTNBUqPDPETBykuPaIaYKAmJSpEqwYAoA0xYUwjmdzbK2867f////Ws8mZPuTYqaVGoOAlD1GxpojGiwcICg8fYvzt+Em5B3yxqZlyh8MCufhJqlKEnBHgNoco/P/zQMRnE2nOxAA7zpUngCwFpNQ8T7GeYB2o3MWLj531////Z5tFdUPcRbjMLk8ShqTHjQJJMLzQrhVAYIhig3JCUiYMPrXxwJWzxe2OON9tQXgToEI4pqhQAoIxlMOAIYI2Iae4uYmZ//NCxHQUYc7AACvUlCMcLKid0je2v3/////7KyKfJznOPC+ESLIvLAHDEFkQY1B0wFoLglEscEZyjDXrqvGwxqCx6jcE8KabRsULlE9H2Dg4sJvtbXUuWWRZUiXKK0To5yM8xx3rv/////NAxH4USc7AADvUlf////Q1rDw6GWFgQioBxIGCsVAHOA8WC4JhSNxaNirwpab/3EF3rB3k1rnZYC9fjEgO8y6lsipIkTCJ/MSBgGkmmFA52lvSBbcJvW95d/9f//////88w01FFI3/80LEhxNxyrwAPg6VSEnEsRiIKYaCaDUKxcYAMjVXCqKwrExcgQs8kkIQek7/3TBSUCb4xkt/P/WFXROko0/gVRt5NDJeVXmUMzK5pTDtuAonRwLSNdiUOdq3pf/Nf//////6UFyIodD/80DElRYx1qwAflSU8IjXYPFkUBhdw8cIILRYdoNcyK61qrvzDODFcPoZdnHBIQlJ1o8IRAUtOxWNhUwkaxabisV5b8My6VRqvSvq12d1MtZabcob2PbOP8q//////rXVHqVDClKyCv/zQsSXFHHWpADGCpQqGMolUQ11viu/GWrLccx3gJIRk0S4zNSutbb0J5h5f/5CIpkQEqMs90l9KSk//4eKeKe+Rc8OAgGg3BuI5b2QKGUXYuPMdkIMkMA+GIeE4flD7hBn10LfD5Ty4P/zQMShFBG+kADOBJVGrLrPz8Hz5z4YwxX//////r/92pTDZF46CcQQijwdNyXZvJuaxCGyOjdGjYpIITEIaDoJhekqcLUXcbyFKdzLGdzQb8U6iUD82jTHQgtita3R+GpCu3tkt64i//NCxKsW2bKUAHhQlMaHvK4cIG38RsYZ/nTHf0hscKDLDhTQ6ua9Bh5b3Kj9yevFXEZory8eK5MzIu93u/1una1vxofcHmL38W2+8iZg2F/HYZkV/////diLg1DBjFSrFbPmZ6ldaSW6//NAxKslUyaYAALevTXPQwl4qH7pyeRCUAkmjzJqHAMg5QwbLIoEaImk44pS7Fjt+H2WGGG32LPt3mbNu3XxwR13ujY/vYTR2kqMxvU2Narj95bvrH6v0U9DvbdS/rOr7/rt6H9Dejb/80LEcByK+qgAAJi5w2Oq/////+/gyOX/X8pFUg1y1JYSMIwoUWBPcPCRHA6LEcXDYochQnEE6g4RDjbaTXT6taOTG2ukwMIjTgxxly8+ZPaH0s3y9i8idD1JdUbgLXyF/////+1XQgP/80DEWRQqtrgAAFC4SZGQhE1/dzcRFNaZUixSyw8WPU8FQDwkHBTD8inSFQZ2KjkRZkdfcXVxFwPpZrIG+1L9WIVTWo2qV9qQXiefyvZ/t/ujyar/////3bW0wJjI5zmp//zvWaLRDf/zQsRjE4p+vAAAkLmEY+kPD+diHkcKiUIQjNYkXplo43ukuqpDuS7UfXNdbNVrEW1VIx/TeeYxv11rBfc7IbW+36r0DMQAJweQZ1LTf/////9r0KLCIqoooUKmK+1qeaSJr7BqEwTD8//zQMRwEmKSwAAAkLmxwwG8OxsBMHY0FpkqSJBY/WGks3ZvKuGjbFrhvX9Yauefv/oWkWBkDFBzWqO0jm3HtVX/3jelJKo+rq2I3R5xxNQ63P/T//f6neeQDF+9hSWnpYMxylxsUlOs//NCxIEWCnq0AGlQuDyHlTuc0zBT0SduacCAS94lt3Wvw098ecgs5FYAlcjnZKttm8prWJ+zizSpnbw3nDn4c3cqTOXOfv6xnZqV6pwG6AE4trLroi+IiXn/////zIQrQniLZENQ1Ors//NAxIQZUgqkAMHwmL+czC4wWyROKWA5NT5VmyN5MoTEMQG4TUkxzObfY50GlVNeMo1pDFtW3ZzLQKvWWaA8VizDtB3i7nJvV460yuo4PoAGh5bGhSBGT3l//////dGl30bQSyma3h7/80LEeRcaArgAgF6ZDGE9dt54vMRBfOx3FgVVWtEAGR6hCEPy9CPUy05OX1jy1bQ7Piy1jK1I6zlo1cEOBI9W/9XJYCdiZZDV+sy8DRaD0KQVy/////4Zra7OnKg+SmJi6qXQrWT13PT/80DEeBOx9rwAaFiZp9cSThUcmJNCUtHJ666VRFctPQntNrCtehW1rCYsH3bmW2u1suNUVbWcBBYICwweJ0mJC7L3vc5HcxoXShd67CQGbla//////MbUokBg8owDDRapUNsUqaioDP/zQsSEFAoCqADAWJgMqKxjZmM/R9SsZ6GEhaIgKdKmf///o1epmdq2EltmGBSYkFpkwmg1THD4EaFDJl4imPCGYXAiYUDLmXc63ZqXFCiWL////////////////////96lZlp6MhqIvv/zQMSPFAHeeADZSpT+hm9zI7vnoZ0OZFhRJUOFClhF1c8dXSwKAGFJ+GS+7/z/GP/////4AeAH//////////6U/+d////X/pT5hxNYp83veV/v/T/fpr5/3Aeb8O0SlbsCjj5swLtD//NCxJoUk1JEAOCEvePtTmmzIYrDkRjG/0uDoeRVeryVljb9qc61e5saHnOWBgG4XA0IKuJwWweZOFKW800evgT4XZP0L2r1FIv//+D/////8jfcv//+GGH//d77+He//85//rWP87+///NAxKMgG25MAEhevP/fd9/DPD/wpMLvbte3rmdin7X1jczuco9W4vMQxRS+N1piTyR9Iq88AvE9jlvq98kXnCnAXKkO+a82pwcnOrG7lDALIEBaJZewuJOIyKwO5bCowENNlqzQy7D/80LEfSSbbmwACHC8hMdRWARArPGFBLpViZYYAGQiARpmFf9P/////X5A5hkQjIEb//1ytSZ51P1zPW95/+H9/8/7+Gqn9z1Y5X/ne6t87zn8/dv7lT5fcqdr24fp6+qLGitS9g9aTuH/80DERiUrboQAALC8wNMwGzunaWpuyoYAsDATSKZibHJYzxCW/kscJps4ySAGRxh0V5qAJVqVCMqSy0MWIzSmKvphljuytHOAE/1h3rbQOOpSnGkeLGIiLYgG+vqL//////////2QGf/zQsQMFdtitAAQUL2Cf/+UmdkYc91////8/39f////XXMaJ1E8Yv1Nc+PD4WU8YaDwqQZIjGiNBQRh4IKyQeKzQwTmxZrEDx0kh0PthU8RRYsWo2bKFWF1qTUWjIDNIN4KxXMDQhhp///zQMQQGBtWpACZUL3///////0tXQIfSvVCkmfGhyXdT29/8vHt0/tNRP//9x/Gqwqq10zqtXEkoLTwNBSHowPjhCBSOFh6sND0ctbMppRzWtbM0E1/sLZIrRRxIErf/nVloXnwXjU2//NCxAoWug6YANCwmfmIhUUvAmqb6v/////////w/+f8xLcc+4WGnwJ+e83ge3VzluJKby3OXySMhc5QehdiizkiuKOkllWccOPcq6lElga1lezpmsWeZawm7/NuEf/XcFgzKx88MeyA//NAxAsWsgasAMBemYSQnJdfX//////////SZ9akSQvh7nC9gFsLGnFFiR4hipQ7LguRxjIJiQ1XtgcaHFaT5yXRfCwJNIpVYcD8Ri2hsFnUcJ0xbbGBweN7jdlZ+ImGwl1IzHQGEAL/80LECxP6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